border-radius 值必须带单位（如px、%），四角顺序为上左、上右、下右、下左；50%圆角需元素宽高相等；Safari中可加-webkit-mask-image修复锯齿；多规则下以最高权重值完全替换而非叠加。
border-radius 值怎么写才不会出错
直接写 border-radius: 10px 是最安全的起点，但实际项目里常因值的写法导致圆角不生效或形状怪异。核心问题不在属性本身，而在单位、顺序和浏览器解析逻辑。
- 数值必须带单位（
px、rem、%），纯数字如border-radius: 10无效 - 百分比值（
%）是相对于容器宽高计算的，宽高不固定时结果难预测，比如在display: inline-block容器里高度可能为 0，导致50%圆角塌成直线 - 四个角单独设值时顺序是「上左、上右、下右、下左」，别按顺时针直觉记混，写成
border-radius: 4px 8px 0 12px就容易手抖输反
用 border-radius 做圆形头像为什么总有点扁
想用 border-radius: 50% 做正圆，前提是元素必须是正方形。只要宽高不等，50% 就会拉出椭圆——因为水平方向按宽度算 50%，垂直方向按高度算 50%，两者基数不同。
- 检查元素实际渲染尺寸，用浏览器开发者工具看 computed 样式里的
width和height - 强制正方形：用
aspect-ratio: 1 / 1（现代浏览器），或老方案padding-top: 100%+position: relative+ 内容绝对定位 - 避免用
max-width或flex拉伸图片本身，那只会让图变形，圆角再对也没用
border-radius 在 Safari 里失效或锯齿明显
旧版 Safari（特别是 iOS 14 及更早）对 border-radius 和 overflow: hidden 的组合支持不稳定，子元素溢出时圆角会被裁掉，或者边缘出现明显像素化。
- 加
-webkit-mask-image: radial-gradient(circle, black 100%, transparent 100%)是绕过 bug 的常用补丁，但只在必要时加，它会影响性能 - 避免在
border-radius容器内使用transform: scale()或backface-visibility: hidden，这些会触发 Safari 的渲染层分离，加剧锯齿 - 如果容器有背景渐变或阴影，优先用
clip-path: inset(0 round 12px)替代，兼容性稍差但渲染更稳
多个 border-radius 值叠加时谁起作用
当多个 CSS 规则都设置了 border-radius，最终生效的是权重最高且未被覆盖的那个。但要注意：它不是“相加”，而是“完全替换”。比如父元素设了 border-radius: 8px，子元素又写 border-radius: 4px，子元素的四个角就彻底按 4px 算，跟父级无关。
- 不要指望用
inherit或unset来“继承部分值”，border-radius不支持单边继承 - 用 CSS 自定义属性时，确保变量名明确，比如
--card-radius: 12px，而不是笼统叫--radius，否则在按钮、卡片、弹窗里混用容易串 - 组件库中若封装了圆角逻辑，检查是否用了
!important，这会让调试时的覆盖规则失效，看着写了却不起作用
事情说清了就结束。真正麻烦的从来不是写 border-radius 这一行，而是它和 overflow、transform、aspect-ratio 打交道时那些看不见的相互作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
