background-clip: padding-box 能解决圆角背景溢出，因它将背景限制在内边距边缘，使其严格贴合 border-radius 内侧轮廓；需同时满足有实线边框且 border-radius > 0，ie9+及主流浏览器支持，旧版edge需加 -webkit- 前缀。
background-clip: padding-box 是解决 border-radius 下背景色“撑破”圆角最直接、开销最小的方案；clip-path 更适合复杂裁剪，但有性能和兼容性代价。
background-clip: padding-box 为什么能切掉溢出背景
浏览器默认把背景铺满整个 border-box 区域，包括边框外缘——所以即使写了 border-radius: 12px，渐变或纯色背景仍会延伸到圆角过渡的“尖角外侧”，视觉上像边框被盖住。加 background-clip: padding-box 后，背景只画到 padding 边缘，正好贴合圆角内侧轮廓。
必须同时满足以下条件才有效：
- 元素有实线边框（
border: 1px solid #000），且border-radius > 0 - 不能是
border: none或仅靠box-shadow模拟边框（background-clip不影响 shadow） - IE9+、Chrome/Firefox/Safari 均支持；旧版 Edge（≤12）需加
-webkit-background-clip: padding-box
clip-path 裁剪 vs background-clip：什么时候该换用 clip-path
clip-path 是真正“物理裁剪”内容区域，不仅管背景，还管子元素、文字、图片等一切后代内容。但它不是为圆角优化的，写法更重、兼容性差、动画中可能掉帧。
适用场景有限，比如：
- 父容器无边框，但要求内部图片/图标也严格卡在圆角内（此时
background-clip无效，得靠overflow: hidden或clip-path） - 需要非标准圆角（如左上圆角 8px，右下圆角 24px，且要精确控制裁剪弧度）
- 配合
transform: scale()动画时 Safari 出现overflow: hidden失效（此时clip-path: inset(0 round 12px)比overflow更稳）
注意：clip-path: circle() 或 ellipse() 不适合矩形容器；推荐用 inset(0 round 12px)，数值与 border-radius 保持一致。
Safari 下 border-radius + transition 溢出的隐藏陷阱
在 Safari 中，仅靠 border-radius + overflow: hidden 做悬停缩放，动画过程中常出现短暂“破框”——这不是 bug，是 WebKit 渲染层在 transition 期间未同步更新裁剪边界。
必须组合使用：
- 保留
overflow: hidden作为降级 fallback - 添加
-webkit-maskSVG 遮罩（rx/ry必须和border-radius数值一致） - 若触发动画的是
transform，父容器加上will-change: transform，避免 Safari 跳过硬件加速
别用 mask-image: radial-gradient()，Safari 对它的过渡支持极差；SVG base64 写法虽长，但稳定。
容易被忽略的 border-radius 自动缩放机制
当相邻两个圆角值之和超过元素宽高时，浏览器会按比例缩小所有圆角——比如 width: 100px; border-top-left-radius: 80px; border-top-right-radius: 80px;，实际渲染的两个圆角会被压到各约 50px，而非“一个生效、一个失效”。
这意味着：
- 不要指望靠超大单侧圆角实现“半圆容器”，得用
clip-path或 SVG 容器 - 响应式布局中，如果
border-radius用百分比（如50%），需确认元素宽高始终相等，否则会变成椭圆裁剪 - 调试时看到圆角“没那么圆”，先检查尺寸是否真够，而不是急着加
!important
真正难调的从来不是加哪条规则，而是搞清当前溢出到底来自背景绘制、内容定位，还是 Safari 的过渡裁剪脱钩——三者修复路径完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
