box-decoration-break: clone 是修复跨行边框断裂的唯一有效方案，它使每行片段独立渲染完整边框、圆角、阴影和背景；slice（默认）仅将整体样式切割，导致中间行边框丢失。
box-decoration-break: clone 是修复跨行边框断裂的唯一有效方案
默认情况下，span 或 a 这类内联元素换行后，只有首行和末行显示完整边框，中间行上下边线可能残留，左右边线直接消失——这不是 bug，而是 box-decoration-break: slice（默认值）的规范行为。要让每行都带完整边框（含 border-radius、border-width、box-shadow），必须显式设置 box-decoration-break: clone。
为什么加了 clone 还没看到边框？常见失效原因
不是写法错，而是触发条件没满足：
- 元素必须是
display: inline或inline-block；block元素不会因换行产生多个片段 - 必须真实发生「布局断裂」：靠
width限制 +white-space: normal触发自动换行，而不是用<br>或display: block强制分段 - 旧版 Safari 和部分 Android WebView 仍需前缀：
-webkit-box-decoration-break: clone，Chrome 130+ 虽已原生支持，但不加前缀在 iOS 16.4 之前仍会失效 - Flex 容器中的子项默认忽略该属性——它只对「fragmentation context」（换行 / 多列 / 分页）生效，不在 Flex 或 Grid 的 item 上起作用
clone 对 border-radius 和 box-shadow 的实际影响
clone 不是复制样式，而是让每个片段独立走一遍盒模型绘制流程：
-
border-radius在每行两端都重新计算，所以首尾都能看到圆角，不是“只保留原始圆角的一半” -
box-shadow每行都独立投射，但注意：部分浏览器（如 Safari 16.6 打印预览）对多片段阴影渲染不一致，建议打印场景下优先测试 -
padding每行都完整应用，但margin不受影响（规范明确排除），别指望它复制外边距 - 若用了
clip-path，它也会被克隆，但复杂路径可能在小片段上裁剪异常，建议仅用于简单圆形或矩形
容易被忽略的性能与兼容性细节
box-decoration-break: clone 不是视觉补丁，它会让浏览器为每个片段重绘一次背景和边框：
- 如果用了大尺寸
background-image或复杂渐变，滚动时可能出现轻微抖动，尤其在低端 Android 设备上 - 它不支持动画：
transition或@keyframes中不能使用该属性 - 在
columns布局中，clone同样生效，但某些旧版 Firefox（box-shadow 渲染有偏移，需加overflow: hidden抑制 -
word-break: break-all导致的字级断裂不属于 fragment context，clone完全无效——那是文本排版层问题，得换用hyphens或调整断词策略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
