定义

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

语法

  1. /* Keyword values */
  2. box-decoration-break: slice;
  3. box-decoration-break: clone;
  4. /* Global values */
  5. box-decoration-break: initial;
  6. box-decoration-break: inherit;
  7. box-decoration-break: unset;

值

slice：

元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。有关详细信息，请参阅CSS规范。

clone：

每个框片段与指定的边框、填充和边距独立呈现。The border-radius、border-image、 box-shadow独立地应用于每个片段,每个片段的背景也是独立绘制的, 这意味着使用 background-repeat: no-repeat 的背景图片仍然可能重复多次.

注意

使用时一般需要增加前缀。

  1. -webkit-box-decoration-break: clone;

用处

行内元素有背景图片且折行状态下，可以通过克隆属性，使背景图可以每一行都能够显示一张背景图。

  1. <span class="wrap">
  2.   <span class="text">I can go to school by bus,but I want to take a taxi.Can you give me some help.</span>
  3. </span>
  1. .wrap {
  2.     background: url(img1.png);
  3. }
  4. .text {
  5.     background: url(img2.png) no-repeat center center/10px 10px;
  6. }