CSS 圆角完全指南：单角 / 椭圆 / 异形按钮

border-radius 支持 1 到 4 个值的速记法，类似 margin/padding：

border-radius: 8px;                              /* 四角都 8px */
border-radius: 8px 16px;                         /* 上下 8px，左右 16px */
border-radius: 8px 16px 24px;                    /* 上 8px，左右 16px，下 24px */
border-radius: 8px 16px 24px 32px;               /* 上右下左，顺时针 */

独立写法更清晰： `` border-top-left-radius: 8px; border-top-right-radius: 16px; border-bottom-right-radius: 24px; border-bottom-left-radius: 32px; ``

实际上 border-radius 可以有 8 个值（用 / 分隔水平和竖直半径），但大多数场景不需要这么复杂。

border-radius 的秘密是每个角其实是一个椭圆弧，水平和竖直半径可分别指定。

border-radius: 10px 20px;

这里 10px 是水平半径，20px 是竖直半径。结果是椭圆形的角。

完整写法： `` border-radius: 10px 20px / 5px 15px; / 水平半径 / 竖直半径 / ``

这样四个角分别是不同的椭圆弧。用来制作"上面圆、下面方"这样的混合形状非常方便。配合特定长宽比，可以做出自然流畅的卡片边角。

把 border-radius 设成超过容器尺寸的值，可以生成胶囊形（两端半圆的矩形）。

.pill {
  width: 200px;
  height: 100px;
  border-radius: 50px;  /* 半径 = 高 / 2，生成胶囊形 */
}

或者用百分比更通用： `` border-radius: 50%; ``

如果容器是正方形，border-radius: 50% 就是完整圆形；矩形时就是胶囊形。这是实现圆形头像、圆形按钮最简洁的方法。

半圆： `` border-radius: 100px 100px 0 0; / 上两个角圆，下两个角方 / ``

或者一行搞定：border-radius: 100px 100px 0; 利用速记法省略最后一个角（默认等于第二个）。

让每个角有不同的半径，再加上不规则的宽高比，就能做出有机的 blob 形状。

.blob {
  width: 200px;
  height: 180px;
  border-radius: 40% 60% 50% 30% / 30% 50% 40% 60%;
}

这样的形状看起来像液体 blob。加上动画：

@keyframes blob {
  0% { border-radius: 40% 60% 50% 30% / 30% 50% 40% 60%; }
  50% { border-radius: 30% 70% 40% 40% / 50% 30% 60% 50%; }
  100% { border-radius: 40% 60% 50% 30% / 30% 50% 40% 60%; }
}
.blob { animation: blob 4s infinite; }

就能做出流体效果的形状变化。这在现代设计（如 Stripe、Figma）中很流行。

border-radius 单独只影响元素本身的边框和背景，子元素内容会溢出超过圆角。结合 overflow: hidden 才能彻底裁剪。

.card {
  border-radius: 8px;
  overflow: hidden;  /* 裁剪溢出内容 */
}
.card img {
  width: 100%;
  display: block;  /* 移除 inline gap */
}

没有 overflow: hidden，圆角图片的四角会显示出矩形图片的直角。这是卡片设计最常见的坑。

性能提示：overflow: hidden 在某些老设备会触发新的层叠上下文，有微小性能代价。现代设备完全无所谓，但如果列表有 1000+ 个卡片，可以用 clip-path: inset() 替代（更高效）。

两种方式都能做圆角，选择取决于需求。

CSS border-radius： - 优点：简单、性能好、支持动画、响应式自适应 - 缺点：只支持椭圆弧，不能做出完全自由的曲线（如贝塞尔曲线）

SVG <rect> 或 <path>： - 优点：任意曲线形状、精确控制、可做复杂插图 - 缺点：需要外联或内联 SVG，文件更大，响应式需要特殊处理

决策树： - 简单矩形 + 圆角 → CSS border-radius - 圆形 / 胶囊形 → CSS border-radius: 50% - 不规则 blob / 复杂曲线 → SVG <path> - 卡片 / 按钮的圆角 → CSS（99% 的实际项目情况）

大多数场景（2026 年）用 CSS 就够了，除非设计稿明确要求 SVG 级别的曲线精度。

box-shadow 与 border-radius 配合使用，阴影会自动跟随圆角的曲线，产生自然的视觉效果。

.card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

这样阴影的 4 个角也是圆的，不会像有 border-radius 但没有阴影的元素那样显得生硬。

细节技巧： - 多层阴影：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08); 做出更自然的深度 - 内阴影：box-shadow: inset 0 1px 2px rgba(255,255,255,0.5); 在圆角内部高亮边缘，增强立体感 - 悬停效果：增加阴影模糊距离或偏移量，transition: box-shadow 0.3s; 做出浮起效果

现代设计系统（Material Design 3 等）都用这样的组合定义组件：border-radius + box-shadow 就是一张卡片的全部。