正在加载...

CSS 圆角

你会给盒子画锋利的边框。设计常常还要 更柔和的角 ——友好的卡片、现代按钮、读起来像圆的头像。这就是 border-radius：每个角弯多少。

border-radius 做什么？

border-radius 圆化边框盒的角。曲线作用于 边框线和背景（通常也会裁切图片/overflow）。数值越大，角越圆。常用单位是 px 或 %。

一个值 — 四个角

日常起点：每个角用同一长度。

四角相同半径

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}

你应该注意到什么？

边框跟着曲线走，白色填充留在圆角形状里。半径不是第二条边框——它 塑造 现有的盒子。

简写：几个值？

可以写一个、两个、三个或四个长度。角的顺序是固定的。

📊 border-radius 取值个数

取值 含义 日常说明
1 四个角相同 柔和的卡片和面板
2 左上+右下，然后右上+左下 对角配对
3 左上，右上+左下，右下 较少见——知道存在即可
4 左上、右上、右下、左下 完全控制，从左上顺时针

四个角，四个数

每个角要各自的弯曲时，从左上起按顺时针列出四个值。

四个不同的角

css
CSS Code 
.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

两个值 — 对角配对

两个长度配对对角：第一个是左上和右下；第二个是右上和左下。

双值对角半径

css
CSS Code 
.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}

胶囊按钮

很大的半径（常常约等于高度一半，或像 999px 这样的大值）会把矩形变成 胶囊——芯片和主操作很常见。

胶囊形按钮

css
CSS Code 
.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}

圆形头像

要真正的圆，给盒子 相等的宽和高，再设 border-radius: 50%。在非正方形盒子上，50% 会得到椭圆。

百分之五十半径的圆

css
CSS Code 
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* 把照片裁进圆内 */
}

自己试试

  1. 用 border-radius: 12px 柔化带边框的卡片。
  2. 给徽章设四个不同的角半径。
  3. 在瓷砖上用双值半径，观察对角配对。
  4. 用 border-radius: 999px 做胶囊按钮。
  5. 做 64×64 头像并设 border-radius: 50%——再在宽矩形上试 50% 并对比。

常见错误

  • 在空的、无边框无颜色的盒子上设巨大半径，却奇怪「为什么看不见」
  • 在宽矩形上用 50% 却期待正圆（你会得到椭圆）
  • 想做圆却忘记宽高等于
  • 以为 border-radius 能替代 border——要看清曲线，仍需要边框或填充
  • 搞混角的顺序（四个值：从左上顺时针）

小结

  • border-radius 圆化盒子的角
  • 一个值柔化所有角；四个值分别控制每个角
  • 两个值对角配对相对的角
  • 大半径做出胶囊；正方形上 50% 做出圆
  • 曲线一起裁切边框和背景
  • 练习卡片、胶囊和头像，直到形状变得直观

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程