盒装饰中断 | box-decoration-break

box-decoration-break

这是一项实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

box-decoration-breakCSS属性指定background，padding，border，border-image，box-shadow，margin，和clip-path

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

/* Global values */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;

语法

该box-decoration-break属性被指定为下面列出的关键字值之一。

取值

slice该元素被渲染，就好像它的盒子没有被分割，然后这个假设盒子的渲染被分割成每一行/列/页面。请注意，对于每个片段，假设盒子可以是不同的，因为如果在嵌入方向上发生中断，则使用它自己的高度;如果中断发生在块方向上，则使用其自身宽度。有关详细信息，请参阅CSS规范。

规范语法

slice | clone

示例

内联框片段

包含换行符的内联元素：

.example { 
  background: linear-gradient(to bottom right, yellow, green
  box-shadow:
    8px 8px 10px 0px deeppink, 
    -5px -5px 5px 0px blue, 
    5px 5px 15px 0px yellow;
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
}

...
<span class="example">The<br>quick<br>orange fox</span>

结果：

​

添加box-decoration-break:clone到上面的样式：

  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;

Results in:

您可以在浏览器中尝试上面的两个内联示例。

这是一个使用大border-radius值的内联元素的例子。第二个"iM"在"i"和之间有一个换行符"M"。为了比较，第一个"iM"没有换行符。请注意，如果将这两个片段的渲染水平叠放在一起，则会导致非碎片渲染。

在浏览器中试试上面的例子。

块框片段

与上面类似风格的块元素，首先没有任何碎片：

将上面的块分成三列导致：

请注意，垂直堆叠这些片段将导致非碎片渲染。

现在用同样的例子 box-decoration-break:clone

请注意，每个片段具有相同的复制边框，阴影和背景。

您可以在浏览器中尝试上面的块示例。

规范

浏览器兼容性