DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!
box-decoration-break
属性允许您控制盒子装饰如何在“断开”元素的片段中绘制。元素可以在行尾、列之间或页面中断处断开成片段。
.module {
box-decoration-break: clone;
}
由 box-decoration-break
控制的盒子装饰属性有:background
(及其子属性)、border
、border-radius
、border-image
、box-shadow
、margin
和 padding
。
值
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
前缀。
这条老狗刚学会了一个新的 CSS 技巧。汪(翻译成狗语就是“谢谢 - 很棒的文章”)。
当 HTML 导出为 PDF 时,它似乎不起作用。还有其他解决方案吗?我正在动态地从表单生成 HTML 并将其发布到服务器。这将被转换为 PDF 格式并进行查看。在生成的 PDF 中,当内容落在第二页时,表格边框会断开。第一页没有底边框,而第二页则缺少顶边框。
Ramya K
我在生成 PDF 时遇到了同样的问题,如果你找到了任何解决方案,请告诉我。