box-decoration-break

翻译不完整。 请帮助我们翻译这篇文章!

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

指定的值将影响元素以下属性的表现:

语法

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

正式语法

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>

... 效果:

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

添加 box-decoration-break: clone 样式之后:

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

... 效果:

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

你可以 尝试这两个例子.

下面是一个使用大圆角值的内联元素示例。第二个“iM”在“i”和“M”之间有一个分界线,作为比较,第一个“iM”是没有换行符的。请注意,如果您将两个片段的呈现水平地排列在一起,就会导致非分段呈现。

A screenshot of the rendering of the second inline element example.

你可以 尝试这个例子.

块状盒子片段

与上述样式相似且没有碎片的块元素的表现:

A screenshot of the rendering of the block element used in the examples without any fragmentation.

将上述块分割成三列,表现为:

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

注意,垂直堆叠这些部分将导致非碎片渲染。

现在,同样的例子,但使用 box-decoration-break 的效果:

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

请注意,每个片段都具有相同的 border, box-shadow 和 background。

你可以 尝试这个例子

规范

规范 状态 备注
CSS Fragmentation Module Level 3
box-decoration-break
Candidate Recommendation 初步定义
初始值slice
适用元素all elements
是否是继承属性
计算值as specified
Animation typediscrete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
box-decoration-breakChrome Full support 22
Prefixed Notes
Full support 22
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.
Edge Full support 79
Prefixed Notes
Full support 79
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.
Firefox Full support 32
Full support 32
No support 1 — 32
Alternate Name
Alternate Name Uses the non-standard name: -moz-background-inline-policy
IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 11.5 — 15
Safari Full support 6.1
Prefixed Notes
Full support 6.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.
WebView Android Full support ≤37
Prefixed Notes
Full support ≤37
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.
Chrome Android Full support 18
Prefixed Notes
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.
Firefox Android Full support 32
Full support 32
No support 4 — 32
Alternate Name
Alternate Name Uses the non-standard name: -moz-background-inline-policy
Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 11.5 — 14
Safari iOS Full support 7
Prefixed Notes
Full support 7
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.
Samsung Internet Android Full support 1.0
Prefixed Notes
Full support 1.0
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes This property is only supported for inline elements.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见