CSS box-decoration-break属性的学习

最近在做项目时接触了一个 CSS box-decoration-break属性，这个 CSS 属性不常见却很实用，所以下去查阅资料学习了一下。

box-decoration-break属性是 CSS 片段模块中的一个属性。

主要用来指定 background、margin、padding、border、border-image、box-shadow、border-radius 和 clip-path 在行内元素中如何使用。

在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 语法

box-decoration-break: slice|clone

实例

指定 box-decoration-break 属性：

span.ex1 { 
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

span.ex2 { 
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
}

属性值

默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。

简单小例子：

.mybj-box { width: 200px; color: #fff; }
.mybj-text { border-radius: 30px; background-color: #0055ff; }

<div class="mybj-box">
  <span class="mybj-text">码云笔记,记录 web 前端开发的个人技术博客</span>
</div>

效果如下：

由上图看出，换行的位置是直直切割，圆角在最开始和最后面。

看的有些丑，那么如何实现上面一行和下面一行两端都是圆角显示呢？

这个时候就要用到我们的box-decoration-break属性了.

改造后的 css:

.mybj-box { width: 200px; color: #fff; }
.mybj-text { 
  border-radius: 30px; background-color: #cd0000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

此时效果:

由上图可以看到断开的两个内联盒子两端都是圆角。

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

会有这样的场景，我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候，我们可以通过<p>嵌套<span>，对<span>包裹的文字进行一些特定的展示。

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

<section> 
   <h1>box-decoration-break</h1> 
   <p class="text"> HTML 语言对其内容信息作以布局归属同时或之后， 
就需要通过 CSS 对其元素进行像素级的控制与<span>修饰</span>， 已达到最友好的视觉体验效果。
CSS3 也是对其原 CSS 的一种升级与拓展， 更为充分的渲染<span>页面提升</span>页面性能。
 同时，这也是 web 前端开发者应具备了解且熟练应用的计算机语言。 </p> 
</section>

CSS 代码：

section {
    width: 640px;
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

section h1 {
    font-size: 16px;
    text-align: center;
}

section .text {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    column-gap: 20px;
    columns: 3;
}

section .text span {
    background: red;
    border-radius: 3px;
    color: white;
    padding: 0 5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

效果展示：

如果对文本行内元素或文本按钮样式设置时，下面这几个属性会影响其渲染效果，在处理时注意添加 box-decoration-break 属性值为 clone 即可保持其样式的完整性。

background、border、border-image、box-shadow、clip-path、margin、padding

兼容性

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

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

看看 Can I Use，其实还好，除了 IE 系列全军覆没，所以可以考虑应用在移动端。即便这个属性不兼容，降级展示对页面不会造成什么影响：

结语

box-decoration-break让我们处理元素多行效果会更完美些。如果元素不是inline元素时，需要先通过 dipslay 设置为 inline。除此之外，此属性不应该和float或者position的值为absolute或者fixed结合在一起使用。最后希望你通过这篇文章对box-decoration-break有一个简单的了解。最后记得别忘了看文章中提供的示例，因为示例能让你看到其效果。