border-radius支持四角独立设置，按顺时针顺序对应左上、右上、右下、左下；可为每角分别指定水平/垂直半径实现椭圆角；需注意overflow:hidden截断、兼容性及设计一致性。
border-radius 支持四个角独立设置
HTML5 本身不提供新属性，真正起作用的是 CSS3 的 border-radius。它原生支持为每个角指定不同半径，无需 JavaScript 或额外标签包裹。
语法本质是：按「顺时针顺序」分别对应左上、右上、右下、左下四个角。只要传入四个值，就自动拆解为各角独立控制。
-
border-radius: 10px 20px 30px 40px→ 左上=10px，右上=20px，右下=30px，左下=40px - 也可用
em、rem、%等单位，但百分比基于元素自身宽高计算，需注意渲染一致性 - 若只写两个值（如
10px 20px），则按「水平 / 垂直」分别应用到所有角，不是单个角
用斜杠分隔实现椭圆角（x/y 半径分离）
每个角还能进一步拆成「水平半径 / 垂直半径」，形成非正圆的椭圆角效果。这是实现更精细造型的关键，比如顶部扁平、底部拉长。
格式为：border-radius: 左上-x/左上-y 右上-x/右上-y 右下-x/右下-y 左下-x/左下-y
立即学习“前端免费学习笔记（深入）”；
button {
border-radius: 8px/4px 16px/6px 0 12px/8px;
}
注意：斜杠前后必须是同一角的两个值，不能混用；任意一个角缺省会回退为圆形（即 x=y）；IE11 及更早版本不支持斜杠语法。
避免 overflow:hidden 截断圆角内容
当子元素（如图标、文字）超出容器边界，或父容器设置了 overflow: hidden，可能导致圆角区域被意外裁剪，看起来像“圆角失效”。
- 检查是否误加了
overflow: hidden—— 它会强制裁剪所有超出边框的内容，包括圆角过渡区 - 若必须保留溢出控制，改用
clip-path配合inset()或ellipse()实现更可控的裁剪 - 绝对定位的子元素容易跑出圆角范围，建议用
transform: translate()替代top/left微调位置
兼容性与移动端适配要点
现代浏览器（Chrome 4+、Firefox 4+、Safari 5+、Edge 12+）均完整支持多值 border-radius，但仍有几个易忽略的实际限制：
- iOS Safari 在
input[type="search"]上会强制覆盖自定义border-radius，需加-webkit-appearance: none - Android WebView（尤其旧版）对百分比圆角支持不稳定，建议优先使用像素值
- 使用
rem设置圆角时，若根字体大小动态变化（如根据屏幕缩放），圆角可能突变，应配合clamp()或媒体查询约束范围
不等长圆角真正难的不是写法，而是设计意图和视觉反馈的一致性——比如按钮右下角特别尖锐，用户却没意识到那是操作入口，这种“个性”反而削弱可用性。
