box-decoration-break

Avatar of Marie Mosley
Marie Mosley

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!

box-decoration-break 属性允许您控制盒子装饰如何在“断开”元素的片段中绘制。元素可以在行尾、列之间或页面中断处断开成片段。

.module {
  box-decoration-break: clone;
}

box-decoration-break 控制的盒子装饰属性有:background(及其子属性)、borderborder-radiusborder-imagebox-shadowmarginpadding

  • slice:初始值。盒子装饰应用于整个元素,并在元素片段的边缘断开。
  • clone:装饰应用于元素的每个片段,就好像片段是完整的、独立的元素一样。边框围绕元素每个片段的四个边,背景在每个片段中完全重新绘制。

用法

box-decoration-break 可以帮助在断开元素的片段之间保持一致的设计。

在此示例图像中,带有橙色边框和 1em 上边距的段落跨两列断开。上面的段落具有 box-decoration-break 的初始值为 slice。下面的段落具有 clone 值。

在上面的段落中,边框在列中断处被切开,上边距只应用于第一个片段。在下面的段落中,边框绘制在段落两个片段的所有四个边周围。边距也应用于每个片段。

另一种常见情况是内联文本断成多行。除非您 clone 样式,否则应用于这些文本的样式看起来很奇怪/不好。

文章演示

演示

box-decoration-break 属性的浏览器支持有限。此演示在 Firefox 37+ 中效果最佳,在该版本中 box-decoration-break 受到完全支持。

查看 CodePen 上的 CSS-Tricks (@css-tricks) 的笔 1074b03653ffb32b88a6f88823c3de34

浏览器支持

在撰写本文时,只有 Firefox 完全支持 box-decoration-break。Webkit 浏览器和 Opera 部分支持内联元素跨行中断的 box-decoration-break,但不支持跨列或页面中断。

Chrome Safari Firefox Opera IE Android iOS
31* 7* 37 29* 4.4* 7.1*

* 部分支持带有 -webkit 前缀。