border-radius 能直接控制四个角的圆角半径；它支持单值、双值、四值及斜杠语法，分别设定统一、对角或各角半径，并可生成椭圆角，单位为像素或百分比，与数学弧度无关。
border-radius 能直接控制四个角的圆角半径
HTML5 本身不提供新属性来画圆角，真正起作用的是 CSS3 的 border-radius 属性。它接受长度值（如 px、em）或百分比，浏览器在 HTML5 文档模式下完全支持该属性——但和是否写 无关，关键在于 CSS 解析器是否启用现代标准。
- 单个值如
border-radius: 8px表示四个角都用 8px 半径 - 两个值如
border-radius: 4px 12px表示「水平半径 垂直半径」，分别作用于所有角（左上/右下用第一个，右上/左下用第二个） - 四个值如
border-radius: 4px 8px 12px 16px按顺时针顺序对应左上、右上、右下、左下 - 斜杠语法如
border-radius: 10px / 5px可分别设定椭圆的水平和垂直半径（生成椭圆角）
border-radius 不是“弧度”，别和 math.atan 混淆
中文里常把 border-radius 误称为“弧度”，但这里的 radius 是几何意义上的“半径”，单位是像素或百分比，和数学中弧度制（radian）毫无关系。你不需要换算 Math.PI 或调用 Math.atan() —— 浏览器内部自动用贝塞尔曲线拟合圆角，开发者只需指定半径大小。
- 写
border-radius: 0.5不会变成 0.5 弧度（约 28.6°），而是 0.5px，几乎不可见 - 百分比值基于元素自身的宽高计算：比如
border-radius: 50%在正方形元素上得到正圆角，在长方形上得到椭圆角 - 不要试图用 JS 动态计算“对应多少弧度”，那是 SVG
移动端和旧版 Safari 需要谨慎处理 border-radius 渲染异常
某些 iOS Safari 版本（特别是 9–12）在配合 overflow: hidden 和硬件加速（如 transform: translateZ(0)）时，会出现圆角裁剪失效、子元素溢出的问题。这不是 HTML5 的锅，而是 WebKit 渲染管线的已知限制。
- 避免对
border-radius元素同时设置overflow: hidden+transform+ 子元素带阴影或渐变背景 - 若必须用 transform，可加
-webkit-mask-image: radial-gradient(circle, black 100%, transparent 100%)强制遮罩（仅限较新 WebKit） - 测试时重点关注按钮、卡片、头像等高频使用
border-radius的组件在 iPhone SE（小屏）上的表现
div.rounded {
border-radius: 12px;
background: #f0f0f0;
overflow: hidden; /* 此处可能在旧 Safari 中失效 */
}
div.rounded img {
display: block;
width: 100%;
height: auto;
}圆角真正难的不是怎么写，而是当它和 box-shadow、transform、backdrop-filter 同时出现时，不同浏览器对“裁剪边界”的定义不一致——这时候得靠视觉回归测试，而不是查文档。
