←→ 切换·Esc 返回

圆角BorderRadius

样式与布局基础
控制方角变圆的程度

圆角决定元素四个角的弧度，可以做出轻微圆角、圆形或胶囊形。项目里应建立少量稳定档位，并根据按钮、卡片等组件的尺寸与气质选择，而不是随手混用数值。

什么时候用

  • 同类元素圆角统一：卡片 Card、输入框 Input 用同一档
    输入框 8px卡片也是 8px
  • 头像 Avatar 用 50%：正方形秒变正圆
    林正方形 + 50% = 正圆头像
  • 标签 Tag、胶囊按钮用 999px：两头全圆
    胶囊标签胶囊按钮
  • 圆角分档管理：4 / 8 / 16 固定几档全站用
    4816

什么时候不用

  • 一个页面五种圆角混着来，气质全垮
  • 给长方形写 50%：得到的是椭圆不是胶囊
    长方形 + 50% = 椭圆，不是胶囊
  • 容器圆角了里面的图还是直角 → 记得 overflow: hidden
  • 四个角各圆各的还没规律，像切坏的蛋糕
组成结构 · Anatomy
内容
1圆角半径Radius角的圆弧大小，四个角可分别设
2边框Border圆角沿着边框的弧线走
3内容Content默认不被圆角裁剪，除非 overflow: hidden
常见变体 · Variants
小圆角4px
克制精致，小元素和工具型产品
中圆角8px
友好现代，最百搭的默认档
大圆角16px
亲和放松，大弹窗与强调面板
圆形50%
活泼俏皮，头像与图标专用
胶囊999px
年轻亲和，标签和社交按钮
典型使用场景
卡片与面板
border-radius: 12px
消息通知
深色模式
圆形头像
50% 正圆
小狐狸 · 2 小时前
这篇圆角教程太好懂了，已收藏！
胶囊标签
前端入门训练营
热卖 上新
标签和按钮都用 border-radius: 999px，两头全圆的胶囊
输入框与按钮
统一 8px，像一家人
border-radius box-shadow flex 布局