border-radius 是 CSS3 属性，非 HTML5 功能；支持 IE9+及现代浏览器，需标准模式；可设统一/分角/椭圆圆角；失效常因无背景、父容器 overflow: hidden 或 box-sizing 影响；勿混用 clip-path；移动端注意 iOS 滚动与圆角兼容性。
用 border-radius 设置圆角，不是“实现”，是直接声明
HTML5 本身不提供圆角能力，真正起作用的是 CSS3 的 border-radius 属性。只要浏览器支持（IE9+、所有现代浏览器），在任何 HTML 元素上加这条样式就能生效，和是否写 关系不大——但没这个声明，IE 会进怪异模式，border-radius 可能被忽略。
-
border-radius: 8px：四角统一设为 8px 圆角 -
border-radius: 4px 8px 4px 8px：顺时针分别设左上、右上、右下、左下 -
border-radius: 10px / 20px：椭圆角，/ 前是水平半径，后是垂直半径 - 值可以是
px、em、%，百分比按元素宽高计算，50%就是正圆
圆角失效？先查这三件事
常见“写了没反应”基本不是语法错，而是被其他样式或结构干扰：
- 元素没有
border或background，圆角存在但不可见——加个background: #eee立刻验证 - 父容器设置了
overflow: hidden，但子元素圆角超出父级边界，被裁掉（尤其配合transform或负 margin） - 用了
box-sizing: border-box却忘了：圆角半径是从 border 外边缘开始算的，如果 border 很粗，实际圆弧可能被压缩变形
border-radius 和 clip-path 别混用
有人想用 clip-path: circle() 模拟圆角，这是走弯路。clip-path 是裁剪可见区域，不影响盒模型、事件响应区或阴影渲染；而 border-radius 是真实改变边框形状，自带阴影适配、鼠标事件正常响应、打印也保留圆角。
除非你要做非对称切角（比如只切右上和左下），否则别碰 clip-path。真要切非标准角，优先用：
立即学习“前端免费学习笔记（深入）”；
border-radius: 0 12px 0 12px;
而不是：
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
移动端圆角要注意 -webkit-overflow-scrolling
iOS Safari 在滚动容器里，如果同时用了 border-radius 和 overflow: auto，再开启 -webkit-overflow-scrolling: touch，圆角可能被滚动层遮盖或锯齿化。
- 临时解法：给滚动容器加
backface-visibility: hidden或transform: translateZ(0)强制硬件加速 - 更稳做法：避免在
overflow容器自身设圆角，改用外层包裹一个带圆角的div，内层负责滚动
圆角看着简单，但和 overflow、transform、box-shadow 一叠加，边界情况就容易露馅——别只测 Chrome，iOS 和 Android WebView 的渲染差异得实机看。
