box-decoration-break: clone 在行内元素上不生效，根本原因是未触发片段化：元素需为 inline/inline-block、在 white-space: normal 下因宽度限制自动换行，且不能处于 Flex/Grid 容器或使用字级断裂属性。
box-decoration-break: clone 在行内元素上不生效，大概率不是漏写 -webkit-box-decoration-break，而是根本没触发片段化（fragmentation）——它压根就没被浏览器当成需要“断开重绘”的场景。
为什么加了 -webkit-box-decoration-break: clone 还是没反应
常见错误现象：写了 span { box-decoration-break: clone; -webkit-box-decoration-break: clone; }，但换行后背景/边框依然只在首尾出现，中间断掉。
- 元素不是
display: inline或inline-block：block 元素不会因换行产生多个片段，box-decoration-break完全不介入 - 没真实发生布局断裂：靠
<br>
换行、或用display: block强制分段，都不算 fragmentation；必须是white-space: normal+ 宽度受限（如父容器width: 200px）导致的自动折行 - 父容器是 Flex/Grid：在 flex 容器中，子项即使为 inline，也不会进入 fragmentation context；
box-decoration-break被忽略（不是 bug，是规范行为） - 用了
word-break: break-all或overflow-wrap: break-word：这些引发的是字级断裂（text fragmentation），而box-decoration-break只管盒级片段（box fragmentation）
box-decoration-break: clone 影响哪些样式，哪些完全不受控
它只控制“片段化时装饰如何重绘”，不是全局样式开关。
- ✅ 生效：background（含
background-image，哪怕no-repeat也会每段重绘）、padding、border、border-radius、box-shadow、clip-path、margin（仅对 inline-level 元素在行内断裂时） - ❌ 无效：
font-size、color、line-height、transform、opacity、vertical-align—— 这些属于内容层或层叠上下文，跟片段无关 - ⚠️ 慎用：
border-image：每个片段会独立切片拉伸，容易接缝错位；大尺寸background-image可能引发渲染性能抖动
为什么必须写 -webkit-box-decoration-break
Safari 和 Chrome 旧版（≤115）不识别无前缀的 box-decoration-break，只认 -webkit-box-decoration-break。现代 Chromium 已支持标准写法，但 Safari（截至 2026 年 5 月）仍需前缀。
立即学习“前端免费学习笔记（深入）”；
- 写法必须同时存在：
-webkit-box-decoration-break: clone;和box-decoration-break: clone;，不能只写其一 - 不要写
-moz-或-ms-：Firefox 自 68+ 原生支持标准属性，IE 不支持该特性 - 注意顺序：前缀版放前面，标准版放后面，避免被覆盖
真正容易被忽略的点是：它只在「有片段」时才起作用。没有换行、不分栏、不跨页，clone 和 slice 看起来完全一样——你得先让浏览器把盒子真的切开，它才有东西可 clone。
