border-radius
定义CSS 圆角属性，为元素边框添加椭圆或圆形弧角
border-radius 用一个值统一四角，用斜杠分隔的两个值分别定义水平与垂直半径，从而做出「半圆角」「胶囊形」等效果。值超过边长一半时自动按比例收缩。
50% 是万能胶囊/正圆写法：正方形配 50% 得圆形，长方形配 999px 得胶囊按钮。border-radius 不影响布局尺寸，只改渲染形状，因此做组件圆角时记得配合 overflow: hidden 裁剪内容。
- 四角顺序：左上 右上 右下 左下（顺时针）；
- 「水平 / 垂直」斜杠语法实现不对称圆角；
- 做头像圆形：固定宽高 + border-radius: 50% + object-fit: cover。
CSS
.btn { border-radius: 999px; } /* 胶囊按钮 */ .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .card { border-radius: 12px 12px 0 0; } /* 只圆上两角 */ .egg { border-radius: 50% / 60% 60% 40% 40%; } /* 不对称椭圆 */
⚠ 常见误区
- 百分比圆角在尺寸变化的元素上表现和 px 不同
- 圆角裁剪子元素记得 overflow: hidden
- border-radius 会裁剪 box-shadow 外阴影范围，需时用 filter: drop-shadow