box-decoration-break: slice 是默认行为，不是 bug；它将内联元素视为整体绘制边框、圆角等后再切割，导致跨行时中间行仅保留上下边框、左右边框和圆角消失。
box-decoration-break: slice 是默认行为，不是 bug
给 span 加了 border 和 border-radius 后跨行，中间行只有上下边框、左右边框消失、圆角变直角——这不是渲染异常，是 box-decoration-break: slice 的标准表现。浏览器把整个内联元素当做一个逻辑盒子先画完边框和圆角，再按换行断点“切开”，所以中间片段只保留被切割后剩下的部分，不会重绘左右边和圆角。
常见触发场景包括：
- 用
em或mark高亮关键词，内容过长自动换行 - 用
span模拟行内按钮，带border+padding+border-radius - 多列布局（
columns）中强调文本跨列断裂
必须用 clone 才能让每行都有完整边框
只有显式设置 box-decoration-break: clone，才能让每一段换行片段都独立渲染边框、圆角、padding 和 box-shadow。但要注意：
- 必须同时写
-webkit-box-decoration-break: clone，Safari 和旧版 Chrome 仍依赖前缀 -
margin在 clone 模式下依然无效（CSS 规范明确排除） - 元素必须是
display: inline或inline-block，且真实因width+white-space: normal换行，而不是靠<br>或display: block强制分段 - Flex 容器中的子项可能忽略该属性——它只在 fragmentation context（换行 / 分页 / 多列）中生效
background 和 border-radius 在 clone 下的行为差异
box-decoration-break: clone 不仅修复边框断裂，还直接影响背景和圆角的渲染逻辑：
-
background-color：每行都填满，不再“丢失”中间行背景 -
linear-gradient：每行独立从左到右渐变，而非拉伸到所有行总宽度 -
border-radius：每行首尾都渲染完整圆角，不是只在整段首尾出现 -
border-image：每个片段都会重新切片和拉伸，容易出现接缝错位，慎用 -
background-clip: text或mask-image：clone 对它们完全不起作用，只管装饰性属性
容易被忽略的性能与兼容性细节
box-decoration-break: clone 看似“一劳永逸”，但实际使用中几个关键点常被跳过：
- 每行重绘一次背景图，若用了大尺寸
background-image，可能引发轻微性能抖动 - 打印预览中，部分浏览器对
box-shadow在 clone 模式下的渲染不一致 -
word-break: break-all导致的是字级断裂，属于文本排版层问题，box-decoration-break 无法干预 - 它不影响
font-size、color、line-height等内容样式，也不复制transform或filter
真正起效的前提，是元素得先进入 fragment 化流程——没换行、没分栏、没分页，就压根不会触发 box-decoration-break 的任何逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
