box-decoration-break: slice 是默认行为，浏览器将内联元素视为整体绘制后按断点切割，导致跨行时中间片段无边框圆角；需用 clone 才使每段独立渲染装饰样式。
box-decoration-break: slice 是默认行为，不是 bug
当你给一个 span 加了 background、border、border-radius，它跨行后首尾有完整样式、中间行只有上下边框或部分背景——这不是渲染错误，是 box-decoration-break: slice 的标准表现。浏览器把整个内联元素当做一个逻辑盒子先画完，再按断点“切开”，所以中间片段不重复绘制边框和圆角。
常见错误现象包括：
- 高亮关键词换行后，中间行背景色消失、圆角变直角
- 带阴影的行内按钮跨行，只有第一行和最后一行有
box-shadow - 使用
linear-gradient背景时，渐变被拉伸到所有行总宽度上，而非每行独立渲染
必须用 clone 的典型场景
只有当你要让**每一段断行都视觉上像独立元素**时，才需要显式设置 box-decoration-break: clone。它不是通用修复方案，而是针对特定装饰需求的精准控制。
适用场景包括：
立即学习“前端免费学习笔记（深入）”；
- 用
mark或em高亮关键词，且要求每行都有完整背景+圆角+内边距 - 用
span模拟行内按钮，带border、box-shadow和padding，又可能因内容长度换行 - CSS 多列布局（
columns）中跨列的强调文本 - 打印样式（
@media print）中，希望每页上的片段都有独立边框
注意：clone 对 margin 无效（规范明确排除），也不会复制 transform 或 filter 等非装饰性属性。
兼容性与写法细节
目前主流浏览器（Chrome、Firefox、Safari、Edge）均已原生支持 box-decoration-break，但旧版 Safari 和部分 Android Webview 仍需前缀：
- 必须同时写
-webkit-box-decoration-break: clone和box-decoration-break: clone -
box-decoration-break不支持动画，不能用在transition或@keyframes中 - 只对发生「片段化」的元素生效：内联元素（如
span、a）跨行，或块级元素在多列/分页中被截断 - 对普通块级元素（如未设
columns的div）无效果
示例写法：
span.highlight {
background: #ffeb3b;
padding: 2px 6px;
border-radius: 4px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
容易被忽略的限制点
box-decoration-break 控制的是「装饰性样式」的片段渲染，但它不改变盒模型结构，也不影响布局流。这意味着：
- 它不会修复因
line-height或vertical-align导致的基线错位问题 - 它不作用于伪元素（
::before/::after）的样式继承 -
clone下的background-image是每片段独立绘制，若用repeating-linear-gradient可能出现断点不连续 - 在 flex 或 grid 容器中，若子项是内联元素且被强制换行，仍需确认父容器未抑制片段化（例如设置了
white-space: nowrap）
真正要起效，得先确保元素确实发生了片段化——这是前提，不是可选项。
