box-decoration-break 对 table 元素完全无效；它仅在分片上下文（如换行、多列、分页）中对 display: inline 或 inline-block 元素生效，而表格使用 table formatting context，不支持该属性。
box-decoration-break 对 table 元素完全无效
直接说结论：box-decoration-break 不作用于 <table>、<tr>、<td> 等表格元素。它只在 fragmentation context（换行、多列、分页）中对 display: inline 或 inline-block 元素生效。表格布局走的是 table formatting context，和 box-decoration-break 的设计目标不匹配。
常见误用场景包括：给 <td> 加 border-radius 和背景，内容换行后圆角消失、背景断裂——这不是 box-decoration-break 能解决的问题，而是表格单元格本身不支持内联式片段化渲染。
真正能用 box-decoration-break 的地方：表格里的 inline 内容
如果你的表格单元格里有需要跨行高亮的文本（比如用 <span class="highlight"> 包裹关键词），那才是 box-decoration-break 的用武之地。
- 必须把样式写在
<span>上，而不是<td> -
span需要自然换行：不能设white-space: nowrap，也不能靠display: block强制分段 - 必须同时写
-webkit-box-decoration-break: clone和box-decoration-break: clone - 注意
margin在clone模式下依然不生效，别指望靠它撑开间距
示例：
立即学习“前端免费学习笔记（深入）”；
td .highlight {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
padding: 2px 8px;
border-radius: 4px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
表格跨行样式断裂的替代解法
想让整个 <td> 或 <tr> 在视觉上“跨多行仍保持完整装饰”，得绕开 box-decoration-break：
- 用
rowspan合并单元格，避免内容被硬挤成多行 - 把
<td>设为display: flex+flex-direction: column，再用伪元素模拟连续边框 - 对长文本做
word-break: break-word或overflow-wrap: anywhere，减少意外换行 - 若需高亮整行，直接给
<tr>加背景，不要依赖内联元素
特别注意：CSS columns 多列布局可触发 box-decoration-break，但表格不是多列容器——别混淆这两套机制。
容易被忽略的兼容性陷阱
即使你在 <span> 上正确用了 clone，仍有几个坑会当场翻车：
- Safari 16.6 之前版本对
-webkit-box-decoration-break: clone渲染不稳定，中间行可能漏背景 - 某些 Android WebView（尤其旧版 Chrome 110 以下）压根不识别该属性，降级回
slice表现 - 如果表格启用了
border-collapse: collapse，<span>的border-radius会被父级边框吞噬，得额外加overflow: hidden到<td> -
background-clip: text或mask-image在任何模式下都不受box-decoration-break影响——它们根本不在装饰属性列表里
实际项目中，先确认是否真需要每行都带圆角+渐变；很多时候，用纯色背景 + padding + line-height 控制行高，比折腾 clone 更稳。
