Safari 中 box-decoration-break 必须同时声明 -webkit-box-decoration-break 和标准属性才生效，仅写标准属性会被忽略；它仅在真实片段化（如内联折行、多列布局、打印跨页）时起作用，影响 background、border、padding 等装饰样式，但不影响 font-size、color 等内容样式。
box-decoration-break: clone 必须搭配 -webkit-box-decoration-break 才能在 Safari 和旧版 WebView 中生效，只写标准属性等于没写。
为什么 Safari 里 box-decoration-break 完全不生效？
截至 2026 年 7 月，Firefox、Chrome、Edge 已原生支持 box-decoration-break，但 Safari（尤其是 iOS 16 及更早 Webview）仍需前缀。Autoprefixer 不会自动补 -webkit-box-decoration-break，必须手动加。
常见错误写法：
span.highlight {
background: linear-gradient(to right, red, blue);
border-radius: 4px;
box-decoration-break: clone; /* Safari 忽略整条声明 */
}正确写法必须双写：
立即学习“前端免费学习笔记（深入）”；
-webkit-box-decoration-break: clone;box-decoration-break: clone;
顺序无关紧要，但缺一不可。iOS 16.4+ 的 Safari 已支持无前缀版本，但为保底，仍建议保留。
box-decoration-break: clone 影响哪些样式？
它只控制「片段化时装饰样式的重绘逻辑」，不是全局样式开关。以下属性在每个行片段中会被独立渲染：
-
background（含background-image、linear-gradient，每行都从头开始绘制） -
border、border-radius、padding、box-shadow -
margin（仅对 inline 元素跨行生效；块级元素分栏/分页时行为复杂，慎用） clip-path
以下样式完全不受影响：
-
font-size、color、line-height等内容样式 -
transform、opacity等层叠上下文相关属性 -
border-image在 clone 模式下易出现接缝错位，不建议用于高精度视觉场景
什么时候 box-decoration-break 根本不会触发？
它只在真实发生「盒子片段化（fragmentation）」时才起作用，不是所有换行都算。以下情况无效：
- Flex 或 Grid 容器中的「换行」（如
flex-wrap: wrap）——这是布局容器主动排列，不产生行盒片段 - 浮动（
float）导致的文本环绕 - 单纯设置
width+white-space: normal引发的软换行，但父容器未形成内联格式化上下文
真正有效的场景只有三个：
- 内联元素（
span、a）因文本流自然折行 - 块级元素在
columns布局中被切分到不同列 - 打印媒体（
@media print）中跨页断裂
clone 模式下 margin 的副作用容易被忽略
当 box-decoration-break: clone 应用于 inline 元素并跨行时，相邻行片段之间的 margin 会叠加——比如 margin: 0.5em，两行之间实际可能拉开 1em 间距。
这不是 bug，是规范定义的行为：每个片段都被当作独立盒子计算外边距。
若视觉上显得松散，可改用 padding 替代，或限制行高（line-height）配合 vertical-align 微调基线对齐。
真正难处理的是多列 + clone + margin 组合，此时各列间外边距行为难以预测，建议优先用 padding 控制内部留白。
