box-decoration-break属性是CSS片段模块（CSS Fragmentation Module Level 3）中的一个属性。主要用来指定background、padding、border、border-image、box-shadow和clip在行内元素中如何使用。行内元素的盒模型是打断的，也就是内联盒子是多行的情况之下。

行内元素片断块

先来回忆一下，在CSS中行内元素具备多行的时候，如果border、padding或者说background这样的属性运用在其身上时效果如下图所示：

但实际上，我们想要的效果是这样的：

记得@CHRIS COYIER写过一篇文章《Multi-Line Padded Text》，介绍如何通过CSS的一些黑魔法实现多行文本padding和background填充的效果。

虽然黑魔法能实现我们想要的一个效果，但实现的成本还是不低。事实上也更希望有更好的CSS属性能解决这个问题。那么这个CSS属性就是今天要说的box-decoration-break。

box-decoration-break

文章开头也提到了box-decoration-break属性是用来控制行内元素有关于padding、background、border-image、border、margin