CSS/CSS3 box-decoration-break属性图文简介

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8346

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、box-decoration-break属性简介

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。

默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。

举个例子，如下HTML和CSS：

<div class="box">
  <span class="text">专门弄了个社交专用的微信号：zhangxinxu-job</span>
</div>

.box { width: 200px; color: #fff; }
.text { border-radius: 30px; background-color: #cd0000; }

结果如下（实时渲染）：

专门弄了个社交专用的微信号：zhangxinxu-job

可以看到换行的位置是直直切割，圆角在最开始和最后面（如下截图箭头标记）：

有些丑！

设计师看不下去了，拿着40米的大刀走过来，说道：“哎呀，王哥，上面一行和下面一行两端都是圆角显然要更好看，可不可以实现啊？”

这个时候就体现出CSS基础知识的重要性了。

是可以实现的，就是借助CSS box-decoration-break属性。

CSS改动如下：

.box { width: 200px; color: #fff; }
.text { 
  border-radius: 30px; background-color: #cd0000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

结果如下（实时渲染）：

专门弄了个社交专用的微信号：zhangxinxu-job

可以看到断开的两个内联盒子两端都是圆角：

二、box-decoration-break语法

在CSS布局中，总会存在元素box盒子断开的情况（page/column/region/line）， box-decoration-break 可以决定断开时候的渲染表现。

当然，只能影响部分CSS的渲染，都有哪些呢？

• background
• border
• border-image
• box-shadow
• border-radius
• clip-path
• margin
• padding

等。

box-decoration-break 语法如下：

box-decoration-break: slice;  /* 默认值 */
box-decoration-break: clone;

其中

slice

slice是切片，分割的意思。默认值。表示各个盒子断开的部分如同切割开一般。

clone

clone是克隆，独立的意思。表示断开的各个盒子样式独自渲染。

三、跨列渲染demo案例

下面看一个跨列的样式案例。

如下HTML：

<div class="box">
    <p class="text">2018年...</p>
</div>

我们只要column布局使两列显示，同时设置p元素有边框：

.box {
    columns: 2;
}
.text {
    border: 5px solid #cd0000;
}

此时如下图，布局break处无边框，表现为slice。

此时，我们设置 box-decoration-break 属性值为 clone ，结果会怎么样呢？在Firefox浏览器下如下：

左右两栏内容分别呈现红色边框，符合我们的预期。

您可以狠狠地点击这里： box-decoration-break跨列布局渲染demo

//zxx: 经过测试，在Chrome浏览器下并没有表现出预期的效果，应该是渲染上的bug。把p标签改成span这种内联标签倒是有预期的效果，可惜按钮toggle样式的时候并不会重渲染，相信以后会修复这个问题的。

理论上CSS Regions布局也能有类似渲染，只是由于CSS Regions布局各大浏览器已经放弃了支持，本文不展示相关案例。

四、实际应用案例

借助 box-decoration-break 属性，我们可以实现不规则的内联文本整体渐变效果。

效果如下截图：

您可以狠狠地点击这里： box-decoration-break文本不规则渐变demo

其中，关键CSS就是设置内联元素的 box-decoration-break 为 clone ，如下示意：

.text {
    padding: 5px;
    background-image: linear-gradient(to right, blue, red 200px);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

而默认状态下，内联元素换行渐变效果是这样的，上下行累加为一个渐变，而不是每一行都是渐变：

五、兼容性、结语

CSS box-decoration-break 属性兼容性如下图：

在移动端页面，包括小程序中可以放心使用。Android，Chrome等浏览器下还需要 -webkit- 私有前缀，Firefox浏览器完全支持。

没有结语。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8346

（本篇完）