box-decoration-break: clone 是唯一能真正解决跨行元素背景断裂问题的方案，它使每行片段独立渲染背景、边框、圆角等装饰样式；slice 默认行为是将整个内联元素视为单盒绘制后再切割，导致中间行背景丢失、渐变拉伸、圆角和 padding 断裂。
box-decoration-break: clone 是唯一能真正解决跨行元素背景断裂问题的方案，slice（默认）会让背景被拉伸到整段文字总宽度上，中间行直接丢失背景色或渐变起止点。
为什么 background 在换行后“消失”了？
这不是 bug，而是 box-decoration-break: slice 的标准行为：浏览器先把整个 span 当作一个逻辑盒子绘制背景，再按断点切开——中间片段只继承“切割后剩余部分”，不重新计算背景起点、不重复绘制圆角和 padding。常见现象包括：
- 高亮关键词换行后，中间行背景色完全空白
-
linear-gradient(to right, #f00, #00f)被拉成一整条长渐变，而非每行独立从左到右 - 带
border-radius和padding的背景块，中间行只剩上下边线，左右留白和圆角全无
必须用 clone 的典型写法
显式设置 box-decoration-break: clone 才能让每一段都独立渲染背景。注意两点：
- 必须同时加
-webkit-box-decoration-break: clone，Chrome 130+ 虽已原生支持，但旧版 Safari 和部分 Android WebView 仍依赖前缀 -
clone对margin无效（规范明确排除），别指望它复制外边距 - 如果用了
background-clip: text或mask-image，clone不起作用——它只管background、border、box-shadow等装饰性属性
示例：
span.highlight {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
padding: 2px 8px;
border-radius: 4px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
clone 对渐变背景的实际影响
clone 不是“复制同一份渐变”，而是让每行都从 0% 开始重新渲染渐变。这意味着：
- 若用
linear-gradient(to right, red 0%, blue 100%)，每行都是红→蓝完整过渡 - 若用
linear-gradient(to right, red 0%, blue 50%, red 100%)，每行中间都是蓝色峰值，不会因行宽不同而偏移 - 但无法实现“整段文字统一渐变”的效果——那恰恰是
slice的用途，得按需取舍
容易被忽略的是：当元素同时参与多列布局（columns）和打印（@media print）时，clone 行为在两种场景下一致生效，但 slice 在分页时可能意外切断边框——这类复合场景必须提前验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
