background-clip: padding-box 是首选解法，它让背景仅绘制在内边距区域，避开边框空间，使圆角裁剪由 border-radius 控制，兼容 IE9+ 及现代浏览器，无需 overflow: hidden 或 -webkit-mask。
background-clip: padding-box 是首选解法
带透明度的边框（比如 border: 2px solid rgba(0,0,0,0.1)）配合 border-radius 时，背景色仍会铺满 border-box 区域，导致四个直角处“漏出”未裁剪的背景——这不是渲染错误，而是 CSS 规范行为。最轻量、兼容性最好的修复方式就是显式声明：background-clip: padding-box。
这个属性让背景（包括 background-color 和 background-image）只绘制在内边距区域，自然避开边框所占空间，圆角裁剪完全由 border-radius 控制。
- 必须搭配实线边框（
solid），dashed或dotted在旧版 Safari 下可能失效 - 不需要
overflow: hidden，避免意外裁掉阴影、伪元素或子元素 - IE9+、Chrome、Firefox、Safari 15.4+ 均原生支持，无需前缀
- 若用了
box-sizing: border-box，确保padding和border尺寸不冲突
Safari 下 background-image + border-radius 溢出怎么办
Safari（尤其 iOS 15–16）对 background-clip 的默认行为更严格：它只裁剪纯色背景，但不会自动裁剪 linear-gradient 或图片背景。所以即使写了 border-radius: 8px，渐变背景仍从四角“捅出来”。
这时仅靠 background-clip: padding-box 就足够——它强制把渐变限制在 padding 区，和圆角边界对齐。
立即学习“前端免费学习笔记（深入）”；
- 不要用
overflow: hidden去硬压，否则可能裁掉box-shadow或::before/::after - 如果边框本身也要渐变（如
border-image），则需额外加-webkit-mask兜底 - 检查是否真被圆角影响：临时删掉
border-radius，看溢出是否消失；若还在，说明是其他原因（如父容器未设背景）
用 -webkit-mask 强制兜底的适用场景
当必须保留 background-clip: border-box（例如边框渐变色需延伸到圆角外），或 Safari 15.0–15.3 等老版本出现裁剪脱节时，-webkit-mask 是唯一可靠兜底手段。
它用一个和 border-radius 值一致的径向渐变遮罩，物理级裁切像素。例如 border-radius: 12px 对应：
-webkit-mask: radial-gradient(circle at top left, transparent 12px, #000 12px) top left / 100% 100%;
- mask 的半径数值必须与
border-radius完全一致，否则圆角会错位 - iOS 15.0–15.3 仅支持
radial-gradient，不支持conic-gradient或url() - 高频动画元素慎用，
-webkit-mask渲染开销高于background-clip - 现代 Safari（15.4+）已稳定支持，但 mask 仍比 padding-box 多一层计算
为什么 overflow: hidden 不是通用解
很多人第一反应是加 overflow: hidden，但它本质是“暴力裁剪”，副作用明显：
- 会裁掉
box-shadow（除非 shadow 在父容器上）、transform位移后的部分、伪元素超出区域 - 若子元素用了
position: absolute或z-index，可能被意外截断 - 在 Safari 中做
transform: scale()动画时，overflow: hidden容易出现过渡帧裁剪脱钩——不是 bug，是 WebKit 渲染层未同步更新裁剪上下文 - 无边框容器加了
overflow: hidden对圆角溢出无效，因为根本没触发裁剪条件
真正需要的是让背景“知道自己该画在哪”，而不是靠容器强行砍掉像素。所以优先写 background-clip: padding-box，再按需补 mask —— 复杂点在于判断场景，而不是堆砌属性。
