如何用 CSS 实现跨换行文本连续圆角背景标记

使用 box-decoration-break: clone 可解决内联元素（如 <span>）在文本换行时圆角中断的问题，确保多行文本的背景、边框和圆角保持视觉连贯，形成统一的“文本标记”效果。

使用 `box-decoration-break: clone` 可解决内联元素（如 ``）在文本换行时圆角中断的问题，确保多行文本的背景、边框和圆角保持视觉连贯，形成统一的“文本标记”效果。

在制作带圆角背景的文本高亮标记（例如引用标签、强调气泡）时，一个常见痛点是：当长文本在 <span> 中自动换行时，浏览器默认将每行视为独立片段渲染——导致 border-radius 仅作用于每一行的首尾，出现“断开的圆角”或尖锐直角，破坏整体设计一致性。

根本原因在于：<span> 是内联元素，其盒模型在换行处被自然切割，而默认的 box-decoration-break: slice（CSS 规范初始值）会使背景、边框、圆角等装饰属性在断点处重置，无法跨行延续。

✅ 正确解法是启用 box-decoration-break: clone：

p span {  padding: 7px 14px;  line-height: 1.6;  background-color: #2e7d32;  color: #ffffff;  border-radius: 50px;  box-decoration-break: clone;  -webkit-box-decoration-break: clone; /* 兼容 Safari、旧版 Chrome/Edge */}

该属性指示浏览器：将每个换行片段都渲染为完整独立的盒子副本——即每行都拥有完整的 padding、background 和 border-radius，且圆角方向一致（如左上/右上始终凸出），视觉上无缝衔接成一条平滑的“胶囊形”标记。

立即学习“前端免费学习笔记（深入）”；

? 注意事项：

• ✅ 必须配合 padding（尤其是左右内边距）才能体现圆角效果；纯上下 padding 无法生成水平方向的弧度。
• ✅ line-height 建议设为无单位数值（如 1.6）或与 font-size 协调，避免因行高过大导致圆角被拉伸失真。
• ⚠️ 浏览器兼容性：现代 Chrome/Firefox/Edge 已原生支持，但 Safari 及部分旧版本需 -webkit- 前缀（如示例所示）。
• ⚠️ 不适用于 display: block 或 inline-block 元素——此属性仅对被换行切割的内联盒生效，若强制改 display，则失去换行切割前提，box-decoration-break 将被忽略。

? 进阶提示：若需更灵活控制（如响应式圆角、阴影融合），可结合 background: linear-gradient() 模拟圆角背景，或使用 clip-path: inset(0 round 50px)（注意兼容性略低），但 box-decoration-break: clone 仍是语义最清晰、兼容性最佳的标准方案。