border-radius四个值顺序为左上、右上、右下、左下；单值统一四角，双值交替上下/左右，三值右下单独设、左下复用右上，四值精准控制各角，需配合overflow:hidden裁剪子元素。

直接用 border-radius 就能实现，但值的写法、单位选择和组合行为，会决定它是不是真圆、会不会裁剪子元素、在缩放时有没有锯齿。

border-radius 四个值怎么填才不晕？

别背顺时针顺序，遇到不确定就写满 4 个值，最稳。浏览器按「左上、右上、右下、左下」解析，但省略时有补全规则：

• border-radius: 8px → 四角都是 8px
• border-radius: 8px 12px → 左上/右下 = 8px，右上/左下 = 12px
• border-radius: 8px 12px 4px → 左上=8px，右上/左下=12px，右下=4px
• border-radius: 8px 12px 4px 6px → 严格按四角赋值，推荐日常使用

px 还是 %？什么时候该用哪个

单位选错，响应式就失效，或头像变椭圆：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 px（或 rem）：适合按钮、卡片等需视觉一致的 UI 组件，值固定，缩放不漂移
• 用 %：适合响应式圆角（如 border-radius: 8%），但注意——50% 只在宽高等值时才是正圆；长方形上会出椭圆角（水平半径 = 宽/2，垂直半径 = 高/2）
• 别用 border-radius: 9999px 当“兜底”，语义不清，小尺寸元素可能溢出，50% 更可靠

为什么图片/子元素还从圆角里撑出来？

border-radius 只裁剪自身边框和背景，**不裁剪子元素**。这是最常被忽略的点：

• 给容器设了 border-radius，但里面 img 或 position: absolute 元素边缘还是方的？加 overflow: hidden
• 但小心：overflow: hidden 也会剪掉你故意伸出的气泡箭头或阴影，尤其是 inset 阴影或 transform 移动后的内容
• 对 body 或根容器滥用 border-radius + overflow: hidden，可能导致滚动条消失或滚动异常

box-shadow 不随圆角走？不是 bug，是默认行为

外部阴影（box-shadow 默认）不会被 border-radius 裁剪，除非：

• 加 inset：如 box-shadow: 0 0 8px rgba(0,0,0,0.2) inset
• 或用 overflow: hidden 包裹整个元素（同上一条，注意副作用）
• Safari 旧版中，border-radius 配合 transform: scale() 可能出现锯齿，此时可用 clip-path: border-box 替代兜底

真正难调的从来不是怎么写 border-radius，而是它和 border、background-clip、overflow、父级 transform 层叠时那些不报错却视觉错位的隐式行为——这些地方没 warning，但用户一眼就看出不对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！