现代浏览器已全面原生支持border-radius，无需加-webkit-等前缀；常见错误包括缺单位、三值顺序混淆、宽高不等致椭圆；斜杠写法依赖实际尺寸，百分比在高度未定义时易失效；需注意overflow、background-clip等对裁剪的影响。
border-radius 在现代浏览器里根本不用加前缀
2026 年的主流浏览器（Chrome 120+、Firefox 115+、Safari 17+、Edge 120+）已全面原生支持 border-radius，-webkit-border-radius 和 -moz-border-radius 这类私有前缀不仅多余，还可能干扰 CSS 层叠逻辑或被误认为“兼容写法”而长期残留。
如果你在现有项目里看到带前缀的写法，大概率是旧代码未清理。新项目直接写 border-radius: 8px 即可，无需条件判断或 Autoprefixer 特别配置——除非你明确要支持 IE 8 或 Android 4.3 以下 WebView，但这类环境早已退出实际维护范围。
border-radius 值写错的三个高频错误
圆角不生效、形状歪斜、四角不对称，90% 是值写法踩坑，不是浏览器问题：
-
border-radius: 10缺单位 → 必须带单位，如10px、0.5em、25% -
border-radius: 10px 20px 30px三值写法记混顺序 → 实际对应：左上（10px）、右上 & 左下（20px）、右下（30px），不是“顺时针直觉” -
border-radius: 50%做圆形却扁了 → 元素宽高不等时，水平按宽度算 50%，垂直按高度算 50%，结果是椭圆；必须确保width === height，可用aspect-ratio: 1 / 1强制
用 / 写椭圆角时的尺寸陷阱
border-radius: 20px / 10px 看似简单，但它的行为依赖容器实际渲染尺寸：
- 斜杠前是水平半径（基于元素 width 计算），斜杠后是垂直半径（基于元素 height 计算）
- 如果元素
height是 auto 或由内容撑开，10px垂直半径可能被压缩到接近 0，导致下边几乎无圆角 - 百分比更危险：
border-radius: 25% / 50%在 flex 容器中若高度未显式设定，computed height 可能为 0，整个圆角失效 - 调试建议：打开浏览器开发者工具，看
Computed面板里的height和width是否符合预期，而不是只看 Styles 面板写的值
border-radius 和背景/边框/阴影的叠加优先级
圆角生效的前提是：它作用于整个盒模型的外边缘。但某些样式会破坏这个前提：
- 父容器设置了
overflow: hidden，子元素的border-radius才真正“裁剪”内容；否则圆角仅影响边框和背景色，图片或子元素可能溢出 -
box-shadow默认不受border-radius影响，会画出直角投影；需配合overflow: hidden或用filter: drop-shadow()才能同步圆角 - 背景图（
background-image）默认不被圆角裁剪，即使容器有border-radius；必须加background-clip: padding-box（默认值）并确保padding存在，或直接用overflow: hidden
最常被忽略的一点：圆角不是视觉修饰层，它是盒模型边界定义的一部分——所有后续渲染（背景、边框、阴影、子元素）都以此为界，但是否“被裁剪”，取决于父级 overflow 和自身 background-clip 的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
