border-radius 基础语法与简写规则
border-radius 是 CSS 中控制元素圆角的核心属性，它接受 1 到 4 个值，遵循特定的简写规则。理解简写规则是掌握圆角设计的第一步：
/* 1 个值：四角统一 */
border-radius: 10px;
/* 2 个值：左上右下 / 右上左下 */
border-radius: 10px 20px;
/* 3 个值：左上 / 右上左下 / 右下 */
border-radius: 10px 20px 30px;
/* 4 个值：左上 / 右上 / 右下 / 左下 */
border-radius: 10px 20px 30px 40px;四角顺序按左上 → 右上 → 右下 → 左下顺时针排列，这与 margin、padding 的简写规则完全一致。1 个值表示四角相等，2 个值表示对角分组（左上右下一组、右上左下一组），3 个值中第二组为对角（右上左下）。
px 与 % 单位的本质差异
border-radius 接受两种核心单位：px（像素）和 %（百分比）。两者在渲染行为上有本质差异：
| 单位 | 计算方式 | 适用场景 | 示例 |
|---|---|---|---|
| px | 固定像素半径，与元素尺寸无关 | 卡片、按钮、统一设计系统 | border-radius: 12px |
| % | 相对元素自身宽高计算 | 圆形头像、椭圆、响应式 | border-radius: 50% |
px 的特点：无论元素是 50px 还是 500px，圆角半径都是固定值。这意味着大元素看起来圆角”较小”，小元素看起来圆角”较大”。适合需要视觉一致性的设计系统。
% 的特点：50% 表示半径等于元素宽度（或高度）的一半。对于正方形元素，50% 会让圆角半径等于边长一半，形成完美圆形；对于矩形元素，50% 会形成椭圆。这种特性使 % 成为制作响应式圆形、椭圆的关键技巧。
关键理解：border-radius: 50% 的圆角半径上限是元素宽度的一半（水平方向）和高度的一半（垂直方向）。超出部分会被浏览器自动裁剪，因此 border-radius: 999px 与 border-radius: 50% 在小元素上可能呈现相同效果。
圆形与胶囊：50% 与 999px 的取舍
制作圆形和胶囊形是 border-radius 最常见的应用场景。两种写法各有优劣：
/* 圆形头像：正方形 + 50% */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
/* 胶囊按钮：任意尺寸 + 999px */
.pill-button {
padding: 8px 24px;
border-radius: 999px;
}圆形：必须满足”宽高相等”的前提。50% 让圆角半径等于边长一半，四角圆弧无缝衔接形成圆形。如果宽高不等，50% 会形成椭圆而非圆形。
胶囊形：使用一个远大于元素高度一半的固定值（如 999px、9999px）。浏览器会自动将半径裁剪到元素高度的一半，左右两端形成完美半圆。这种写法的优势：
- 无需计算：不用知道元素确切高度，999px 适配任何尺寸
- 响应式友好：元素高度变化时，圆角自动跟随，无需重新设置
- 代码简洁：一个固定值即可，比
height / 2更优雅
取舍原则：制作精确圆形（如头像、徽章）用 50%，制作胶囊形（如按钮、标签）用 999px。两者不可互换——50% 用于按钮在高度变化时会变形，999px 用于头像在矩形元素上无法形成圆形。
四角独立模式与不对称设计
四角独立模式允许每个角设置不同的圆角半径，这是创造装饰性、不对称设计的关键能力。常见应用：
/* 不对称卡片：左上右下大圆角，右上左下小圆角 */
.asymmetric-card {
border-radius: 40px 8px 40px 8px;
}
/* 对话气泡：仅左下角保留小圆角模拟"尖角" */
.speech-bubble {
border-radius: 16px 16px 4px 16px;
}
/* 折叠便签：顶部圆角，底部直角 */
.sticky-note {
border-radius: 12px 12px 0 0;
}
/* 波浪轮廓：对角交替圆与直角 */
.wave-shape {
border-radius: 100% 0 100% 0;
}设计要点：
- 斜向构图：左上右下大、右上左下小，形成动感斜向视觉引导
- 焦点引导：在某角保留小圆角，模拟”尖角”指向特定方向（如对话气泡指向发言者）
- 功能性区分：顶部圆角 + 底部直角，暗示元素”被撕下”或”悬浮”
- 装饰性波浪：对角交替圆与直角，形成波浪轮廓，常用于创意海报
四角独立模式特别适合需要打破”千篇一律圆角卡片”的设计场景。配合背景色、阴影、渐变，可以创造独特的视觉识别。
椭圆八值：斜杠语法详解
椭圆八值模式是 border-radius 最复杂的语法，使用斜杠 / 分隔水平与垂直半径：
/* 水平四值 / 垂直四值 */
border-radius: 100% 100% 100% 100% / 50% 50% 50% 50%;
/* 简写：水平 1 值 + 垂直 1 值 */
border-radius: 100% / 50%;斜杠前为四个角的水平半径（按左上、右上、右下、左下顺序），斜杠后为四个角的垂直半径。两者独立计算，组合形成椭圆弧。
核心应用：
- 椭圆头像：矩形元素（如 200x100）设置
border-radius: 100% / 50%，形成完美椭圆 - 叶子形状：
border-radius: 100% 0 100% 0 / 100% 0 100% 0，左右两端尖锐、上下圆润 - 拱形：
border-radius: 50% 50% 0 0 / 100% 100% 0 0，仅顶部圆角模拟隧道入口 - 鸡蛋形：
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%，上下不对称椭圆
椭圆八值模式的关键理解：每个角的圆弧由水平半径和垂直半径共同定义，类似椭圆的两个轴。当水平半径等于垂直半径时，形成圆弧；不等时形成椭圆弧。这种特性使 border-radius 可以创建从圆形到椭圆、从对称到不对称的丰富形状。
浏览器兼容性与历史演变
border-radius 是 CSS3 的成熟特性，浏览器兼容性优秀：
| 浏览器 | 支持版本 | 前缀需求 |
|---|---|---|
| Chrome | 4.0+ | 无需 |
| Firefox | 3.0+ | 无需（旧版 -moz-） |
| Safari | 3.1+ | 无需（旧版 -webkit-） |
| Edge | 12+ | 无需 |
| IE | 9+ | 无需（IE8 及以下不支持） |
历史演变：
- 早期阶段（2009-2011）：需要
-webkit-、-moz-前缀，且语法有差异 - 过渡阶段（2011-2013）：IE9 支持无前缀语法，但旧版浏览器仍需前缀
- 成熟阶段（2013 至今）：所有现代浏览器全面支持无前缀语法
百分比值兼容性：百分比单位在 IE9+ 完整支持，包括四角独立、椭圆八值（斜杠语法）。旧版浏览器（IE8 及以下）完全不支持 border-radius，元素呈现直角。
生产环境建议：现代项目无需任何前缀，可直接使用标准语法。仅在需要支持 IE8 及以下时才添加前缀，但这类场景已极为罕见。
性能考量与最佳实践
border-radius 本身性能优秀，但在特定场景下可能成为性能瓶颈：
性能风险场景：
- 超大圆角 + 动画：圆角半径超过元素尺寸时，浏览器需计算复杂裁剪路径，配合
transition或animation可能引发重绘开销 - 圆角 + 阴影 + 透明度叠加：
border-radius+box-shadow+opacity同时使用时，每帧都需重新计算阴影路径，可能影响滚动流畅度 - % 单位 + 响应式动画：百分比随元素尺寸变化，响应式断点切换时圆角会突变，配合动画可能产生闪烁
最佳实践：
- 圆角优先使用 px：除非制作圆形/椭圆，否则用 px 保持视觉一致性
- 避免 999px + 动画：胶囊形按钮的 999px 不应配合 transition，否则在尺寸变化时性能下降
- 阴影分层：圆角元素的阴影尽量使用单层，多层叠加（如 Material Design 的 elevation）会成倍增加渲染开销
- will-fire 优化：动画密集场景可添加
will-change: border-radius提示浏览器优化（但不要滥用）
性能底线：正常使用（卡片 8-16px、按钮 4-8px、头像 50%）完全无性能问题，无需过度优化。性能问题通常出现在极端场景（数百元素同时动画 + 圆角 + 阴影）。
应用场景与配套工具协同
border-radius 在前端开发中有广泛应用，与设计工具链形成协同：
典型应用场景：
- 按钮设计：4-8px 小圆角（柔和）、999px 胶囊（友好）、50% 圆形（图标按钮）
- 卡片设计：8-16px 中等圆角（现代感）、20-32px 大圆角（柔和设计趋势）
- 头像裁剪：50% 圆形（社交头像）、8px 圆角（专业头像）
- 徽章标签：999px 胶囊（标签）、4px 小圆角（状态徽章）
- 装饰形状：不对称圆角（创意卡片）、波浪轮廓（装饰元素）
与设计工具链协同：
- CSS 盒阴影生成器：圆角 + 阴影组合是卡片设计的标配
- CSS 渐变生成器：圆角 + 渐变背景是按钮设计的核心组合
- CSS 文字阴影生成器：圆角容器 + 文字阴影形成立体感
- 颜色值转换：精确匹配圆角元素的背景色与边框色
设计系统建议：建立统一的圆角规范（如 sm=4px、md=8px、lg=16px、xl=24px、full=999px），在整个项目中保持一致，避免随意圆角导致的视觉混乱。配合 CSS 变量（--radius-sm、--radius-md）可轻松实现主题切换与设计迭代。