box-decoration-break: clone 是唯一能真正让跨行内联元素每行都渲染完整边框、圆角、背景和 padding 的方案；只写标准属性在 Safari 和旧版 WebView 中等于没写，必须同时声明 -webkit-box-decoration-break: clone。
box-decoration-break: clone 是唯一能真正让跨行内联元素每行都渲染完整边框、圆角、背景和 padding 的方案；只写标准属性在 Safari 和旧版 WebView 中等于没写，必须同时声明 -webkit-box-decoration-break: clone。
为什么加了 border 和 padding 跨行后左右空白却消失了？
这不是样式失效，而是 box-decoration-break: slice（默认行为）的规范表现：浏览器先把整个 span 当作一个逻辑盒子画完所有装饰样式，再按换行点“切开”，中间片段只保留被切割后剩下的上下部分，左右 padding、border 和 border-radius 自然丢失。
常见触发场景包括：
- 用
span高亮长关键词，内容自动折行 - 行内按钮带
padding+border-radius，宽度受限后换行 - 多列布局（
columns）中强调文本跨列
box-decoration-break: clone 为什么写了也没反应？
不是语法错，而是三个硬性条件缺一不可：
- 元素必须是
display: inline或display: inline-block；block元素不会产生行内片段 - 必须真实发生布局断裂：靠
width限制 +white-space: normal触发软换行，不是用display: block强制分段 - 必须显式写前缀：
-webkit-box-decoration-break: clone；Safari（尤其 iOS 16.4 之前）和部分 Android WebView 完全忽略无前缀版本
另外，Flex 或 Grid 容器中的子项默认不进入 fragmentation context，该属性直接失效——它只对换行 / 多列 / 分页这类真实片段化场景起作用。
clone 模式下 padding 和 background 怎么表现？
clone 不是复制值，而是让每个换行片段独立走一遍盒模型绘制流程：
- 每行两端都会重新计算
border-radius和padding，首尾都能看到完整圆角和左右留白 -
background-color每行都填满；linear-gradient(to right, red, blue)每行都从左到右独立渐变，不是拉伸到整段总宽度 -
margin在任何模式下都无效（CSS 规范明确排除），别指望它复制外边距 - 若用了大尺寸
background-image或复杂渐变，滚动时低端 Android 设备可能出现轻微重绘抖动
它不支持动画：transition 或 @keyframes 中修改该属性无效果。
真正容易被跳过的点是：这个属性不决定“要不要换行”，只控制“换行之后样式怎么画”。如果文本根本没触发片段化（比如父容器是 flex 且子项未设 white-space: normal），加再多 clone 也看不到变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
