box-decoration-break: clone让每行独立渲染完整装饰；必须用CSS规则（非HTML属性），加-webkit前缀兼容旧版Chrome/Safari，仅对片段化inline元素生效，影响border、padding、background等，不影响font-size等内容样式。
box-decoration-break 不是 HTML 属性，必须写在 CSS 里；直接加在 <span> 或 <div> 的 style 属性中无效，也不会生效。
为什么 inline 元素换行后圆角/边框/背景“断了”
常见现象：给一个 <span class="tag">多行标签文本</span> 设置了 border-radius: 12px、padding: 4px 8px 和渐变背景，但文本换行后——第一行右上/右下有圆角，第二行左上/左下有圆角，中间断裂处是直角、无 padding、背景不连续。
原因在于，默认行为是 box-decoration-break: slice：浏览器把整个 span 当成一个逻辑盒子渲染，再按行“切片”，装饰只保留在首尾片段的外边缘。
解决思路就是显式覆盖为 clone，让每行都当独立盒子重绘所有装饰。
立即学习“前端免费学习笔记（深入）”；
怎么正确启用 clone 行为（含兼容性写法）
必须用 CSS 规则，不能靠 HTML 属性。关键点：
-
box-decoration-break: clone是标准写法，但 Chrome 早期（≤ v21）、Safari（≤ v6.1）、Opera（≤ v11.5）需要前缀 - Firefox 从 v32 起原生支持，无需前缀
- IE/Edge 完全不支持（v79+ 已弃用旧 Edge，但也不支持该属性）
- 移动端（iOS Safari、Android Chrome、微信小程序 WebView）基本都支持
clone，可放心用
推荐写法：
.highlight {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
padding: 0.2em 0.5em;
border-radius: 6px;
line-height: 1.5;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
哪些样式会被 clone 影响，哪些不会
box-decoration-break: clone 控制的是“片段化时如何重绘装饰”，它影响以下 CSS 属性在每个片段上的表现：
- ✅
background（包括background-image、background-repeat: no-repeat也会在每段重绘） - ✅
padding、border、border-radius、box-shadow - ✅
margin（注意：仅对 inline-level 元素在行内断裂时生效；块级元素分栏/分页时 margin 行为较复杂） - ✅
clip-path - ❌
font-size、color、line-height等内容样式不受影响 - ❌
transform、opacity等层叠上下文相关属性也不受此控制
特别注意：border-image 在 clone 模式下会为每个片段独立切片和拉伸，容易出现接缝错位，慎用。
真正容易被忽略的是：这个属性只对发生「片段化」的元素起作用——也就是 inline 元素跨行、inline-block 跨列、或打印/分页/多列布局中的断裂场景。给普通块级 <div> 直接加它，毫无效果。
