Chrome 130 新增对 box-decoration-break 属性的支持

大家好，我是 ConardLi 。

在 Chrome 130 中，新增了对 CSS 属性 box-decoration-break:clone ，的支持，这个属性可以使开发者在处理内联和块级内容碎片化时，多一种新的方式。

今天的文章我们来详细介绍下该属性及其使用方法，并结合实例演示其效果和应用场景。

什么是 box-decoration-break

box-decoration-break 是一个 CSS 属性，可以用来定义盒模型碎片（fragment）的装饰性样式如何呈现，碎片化主要会在以下两种情况下出现：

1. 内联碎片化 ：例如，一个内联元素（如一段文本）跨越多行。
2. 块级碎片化 ：例如，在多列布局中或打印时，内容分割到多个页面。

该属性有两个主要值：

• slice （默认）：在每个碎片处切割盒模型。
• clone ：在每个碎片处克隆装饰性样式。

此外， box-decoration-break 还有几个全局值：

• initial ：把属性恢复到它的默认值。
• inherit ：从父元素继承该属性的值。
• unset ：重置属性值，若该属性是继承的则继承，否则使用默认值。

内联碎片化

slice 效果

当内联元素如文本跨越多行时，如果使用默认的 slice ，背景和边框会在行的两端被切断。以下是一个示例：

span {
    background-color: #002856;
    color: #fff;
    border-radius: 0.5em;
    border: 2px solid black;
}

效果图示意：

clone 效果

而对于 clone ，每行的起始和结束都会有独立的边框和背景，如下所示：

span {
    background-color: #002856;
    color: #fff;
    border-radius: 0.5em;
    border




    
: 2px solid black;
    box-decoration-break: clone;
}

效果图示意：

块级碎片化

slice 效果

在块级碎片化如多列布局时，使用默认的 slice 值，边框将在列之中断开，如下示例所示：

.columns {
    column-count: 5;
}

.columns p {
    border: 5px solid #34c9eb;
    padding: 0.5em;
}

效果图示意：

clone 效果

而对于 clone 值，每一个列的内容将完整地包裹在边框中：

.columns {
    column-count: 5;
}

.columns p {
    border: 5px solid #34c9eb;
    padding: 0.5em;
    box-decoration-break: clone;
}

效果图示意：

这种效果在打印时也同样适用。如果一个盒子跨页打印， clone 将在每一页完整地渲染边框。

影响的 CSS 属性

box-decoration-break 属性会影响以下 CSS 属性的表现：

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

示例

行内盒子片段示例

使用 box-decoration-break: slice 时：

.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 foxspan>

添加 box-decoration-break: clone 样式之后，效果显然变得不同：

.example {
    /* 其他样式保持不变 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

块状盒子片段示例

将块元素分割成多列时，使用 box-decoration-break: clone 使得每个片段都具有相同的 border 、 box-shadow 和 background 。