CSS

盒装饰中断 | box-decoration-break

box-decoration-break

这是一项实验技术

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

box-decoration-breakCSS属性指定backgroundpaddingborderborder-imagebox-shadowmargin,和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;

初始值slice
应用于all elements
是否继承no
应用媒体visual
计算值as specified
动画类型discrete
规范顺序the unique non-ambiguous order defined by the formal grammar

语法

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

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

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

规范

SpecificationStatusComment
CSS Fragmentation Module Level 3The definition of 'box-decoration-break' in that specification.Candidate RecommendationInitial definition

浏览器兼容性

FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Support on inline elements22-webkit32.0 (32.0) 1No supportNo support11.5 2 15-o6.1
Support on non-inline elementNo support32.0 (32.0) 1No supportNo support11.5 2No support

FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support on inline elements4.4(Yes)-webkit32.0 (32.0)No support12 2 15-o7.1
Support on non-inline elementNo supportNo support32.0 (32.0)No support12 2No support