深入探究cssboxdecorationbreak属性

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

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

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

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

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

可选取值只有两个：

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

换行示例

这个属性通常作用于内联元素。假设我们存在如下结构，并且给它添加一个边框：

ABCDEFGHIJKLMN

span {
    border: 2px solid #999;
}

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

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

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

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

生效后，我们将会得到这样的结果：

CodePen Demo -- box-decoration-break

https://codepen.io/Chokcoco/pen/NJKoNq

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 实现文本选中效果

会有这样的场景，我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候，我们可以通过

嵌套 ，对 包裹的文字进行一些特定的展示。

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

The box-decoration-break CSS property specifies how an element&＃39;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. 

其中，我们将需要强调的内容通过 标签包裹起来，赋予特定样式并且加上 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 也非常便捷。当然这里有个小技巧，正常而言， box-decoration-break: clone 只对 inline 元素生效，如果我们的文案像是这样包裹在

标签内：

The box-decoration-break CSS property specifies how an element&＃39;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. 

要使 box-decoration-break: clone 对

生效，可以通过设定

的 display: inline 来实现。如此一来，要实现上述效果，我们只需要：

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

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

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

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

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

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

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

更多编程相关知识，请访问：编程视频！！

以上就是深入探究css box-decoration-break属性的详细内容，更多请关注其它相关文章！