border-radius多值语法需严格遵循顺序与分隔规则：单值统一四角；双值为“水平 垂直”；四值顺时针为左上、右上、右下、左下；八值用斜杠分隔水平/垂直半径，各四值。
border-radius 多值语法到底怎么写
不是所有 border-radius 写法都等效，四个角的圆角半径可以独立控制，但顺序和分隔符有硬性规则。写错就变成“只生效左上角”或“全角统一”，尤其在配合 border 或 box-shadow 时视觉偏差更明显。
- 单值：如
border-radius: 8px→ 四个角都是 8px 圆角 - 双值：如
border-radius: 4px 12px→ 水平方向（左上+右上，左下+右下）用第一个值；垂直方向（左上+左下，右上+右下）用第二个值 - 四值：如
border-radius: 4px 8px 12px 16px→ 顺时针：左上、右上、右下、左下 - 八值（最灵活）：如
border-radius: 4px 8px / 2px 6px→ 斜杠前是水平半径，斜杠后是垂直半径；每个方向仍可写四值，即border-radius: 4px 8px 12px 16px / 2px 6px 10px 14px
椭圆圆角（非对称 radius）常见失效原因
想让左上角是横向拉长的椭圆（比如 12px / 4px），但实际渲染成正圆？大概率是父容器或自身设置了 overflow: hidden 且没预留足够空间，或者用了 transform: scale() 等会截断渲染的属性。
- 椭圆圆角要求元素本身支持「非等比」的 border 渲染，现代浏览器都支持，但旧版 Safari（
-
background-clip: padding-box有时会意外裁掉椭圆边缘，建议显式设为border-box - 如果元素有
border，椭圆半径是相对于 border box 计算的，不是 content box —— 这点常被忽略，导致视觉上“圆得不够”
和 background、box-shadow 配合时的层级陷阱
border-radius 只裁剪 border 和 background，不裁剪 box-shadow（除非加 overflow: hidden），也不裁剪子元素。想让阴影也圆润，不能只靠 border-radius。
- 阴影圆角需配合
filter: drop-shadow()（它会尊重 border-radius），或把阴影写在伪元素上再一起圆角 - 背景图（
background-image）默认从 content box 开始铺，若要贴合圆角边缘，得设background-origin: border-box - 子元素超出父容器圆角部分不会被自动隐藏，必须加
overflow: hidden，但注意这会影响 position: fixed 子元素的定位上下文
性能敏感场景下避免过度复杂圆角
八值 + 椭圆 + 动画 border-radius 在低端 Android 或 iOS WebView 中可能触发重绘抖动，尤其配合 will-change 或频繁 resize 时。
- 纯 CSS 动画圆角，优先用
transform: scale()模拟缩放圆角效果，比直接动画border-radius更稳 - 如果只是静态展示，用 SVG
- 真要动态改圆角，避免在 scroll 或 touchmove 中直接 setStyle，缓存计算结果，用
requestAnimationFrame节流
事情说清了就结束。真正难的不是写对语法，而是判断哪个角该用什么值、要不要椭圆、以及它和周围样式是否打架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
