最近在做项目时接触了一个 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;
}
属性值
| slice | 默认。 盒子装饰作为一个整体应用于元素，并在元素片段的边缘处断开 |
| clone | 框装饰适用于元素的每个片段，就好像片段是单个元素一样。 边框包裹元素每个片段的四个边缘，并为每个片段重新绘制背景 |
默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。
简单小例子：
.mybj-box { width: 200px; color: #fff; }
.mybj-text { border-radius: 30px; background-color: #0055ff; }
<div >
<span >,记录 web 前端开发的个人技术博客</span>
</div>
效果如下：
结语
box-decoration-break让我们处理元素多行效果会更完美些。如果元素不是inline元素时，需要先通过 dipslay 设置为 inline。除此之外，此属性不应该和float或者position的值为absolute或者fixed结合在一起使用。最后希望你通过这篇文章对box-decoration-break有一个简单的了解。最后记得别忘了看文章中提供的示例，因为示例能让你看到其效果。