有趣的 box-decoration-break

这两天接触到一个颇有意思的 CSS 属性 -- box-decoration-break。下面就一块儿去一探究竟。

由于 MDN 上关于这个属性，没有中文文档，因此一直在想一个合理贴切的中文翻译。直译一下：

• box -- 盒，能够理解为元素盒模型
• decoration -- 装饰，理解为元素样式
• break -- 断行，参考word-break ，理解为断行时候的表现

那么，这个属性能够先理解为，元素在发生断行时其样式的表现形式。

MDN 上英文释意为：The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 属性规定了一个元素片断在发生折行/断行时，应该如何被渲染。

可选取值只有两个：

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}
复制代码

换行示例

这个属性一般做用于内联元素。假设咱们存在以下结构，而且给它添加一个边框：

<span>ABCDEFGHIJKLMN</span>
复制代码

span {
    border: 2px solid #999;
}
复制代码

嗯，效果以下，平平无奇：

好，接下来就是 break，咱们把上面一行的文字断行，样式不变：

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>
复制代码

获得以下结果：

O，能够看到，文字换行的同时，边框也随之变化，头尾两行都有 3 边边框，中间两行只有上下两边边框。若是将 4 行合起来，能够拼成图一，这个是正常的展现效果。

接下来，咱们加上本文的主角 box-decoration-break: clone：

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}
复制代码

生效后，咱们将会获得这样的结果：

box-decoration-break: clone 使用小结

看到这里，咱们已经能够大概理解这个属性的做用了：

使用了 box-decoration-break: clone 的内联元素，若是存在折行显示，那么每一行都将拥有本来单行的全部完整样式。

再看个例子加深下理解，存在以下结构，其使用了 box-decoration-break: clone 先后两种效果：

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>
复制代码

CodePen Demo -- box-decoration-break

box-decoration-break: clone 生效样式影响范围

固然，使用了 box-decoration-break: clone 的元素并不是对每个样式都会生效，只会做用于下列样式：

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding
• Syntax

box-decoration-break: clone 实际应用

接下来看看，有没有什么靠谱的实际应用场景。

box-decoration-break: clone 实现文本选中效果

会有这样的场景，咱们但愿对一个多行文本中的特定一段文本进行着重展现。这个时候，咱们能够经过 <p> 嵌套 <span> ，对 <span> 包裹的文字进行一些特定的展现。

譬如咱们有这样一段文案：

<p>
The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>
复制代码

其中，咱们将须要强调的内容经过 <span> 标签包裹起来，赋予特定样式而且加上 box-decoration-break: clone，这样，不管强调文案是否换行，每一处的强调背景都是一致的：

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}
复制代码

获得以下效果：

若是不加 box-decoration-break: clone 呢？那么若是存在换行，效果会大打折扣：

CodePen Demo -- text-decoration-break 文本选中效果

box-decoration-break 每行文字带特定边框

又会有这样的场景，咱们但愿每一行文案都带有特定的边框样式，像这样：

怎么实现呢？也许能够每一行都是一个 <p>，每一行 <p> 设定上述样式。可是若是文本内容不肯定，容器的宽度也不肯定呢？

这种场景，使用 box-decoration-break 也很是便捷。固然这里有个小技巧，正常而言， box-decoration-break: clone 只对 inline 元素生效，若是咱们的文案像是这样包裹在 <p> 标签内：

<p>
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>
复制代码

要使 box-decoration-break: clone 对 <p> 生效，能够经过设定 <p> 的 display: inline 来实现。如此一来，要实现上述效果，咱们只须要：

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}
复制代码

不管文本内容或者容器宽度如何变化，都能完美适配：

CodePen Demo -- box-decoration-break 每行文字带特定边框

box-decoration-break 结合过渡动画

结合上面的内容，咱们还能够考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。

譬如，咱们但愿当咱们 hover 文字内容的时候，一些重点须要展现的文字段落可以被强调展现，多是这样：

CodePen Demo -- box-decoration-break 过渡动画

又或者是这样：

CodePen Demo -- box-decoration-break 结合过渡动画

你能够尝试点进 Demo ，而后去掉 box-decoration-break: clone ，会发现效果大打折扣。

兼容性

额，按照惯例兼容性应该都不太行。而且 MDN 也给出了这样的提示：

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use，其实还好，除了 IE 系列全军覆没，因此能够考虑应用在移动端。即使这个属性不兼容，降级展现对页面不会形成什么影响：

另外，本文中，给出的代码都是 box-decoration-break: clone ，CodePen 自带了 autoprefixer 实际中可能须要写成：

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
复制代码

最后

国内看到了大漠老师和张鑫旭大大都已经写过这个属性，你们能够对比着看看，加深理解：

• CSS/CSS3 box-decoration-break属性简介
• 初探box-decoration-break

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。