border-radius可创建圆角、圆形或椭圆效果，通过单值统一设置或分别指定四个角，支持斜线语法定义水平和垂直半径，常用于按钮、头像等元素，提升界面视觉柔和度。
使用 CSS 的 border-radius 属性可以轻松实现元素的圆角效果。它允许你将矩形边框的直角变为圆角，甚至创建圆形或椭圆形状。
基本语法与单值设置
border-radius 是一个简写属性，可以同时设置四个角的圆角半径。当你只提供一个值时，四个角都会应用相同的圆角大小。
例如：-
border-radius: 10px;—— 所有角都是 10 像素的圆角 -
border-radius: 50%;—— 元素变成圆形（前提是宽高相等）
分别控制四个角
你可以为每个角指定不同的值，顺序是：左上、右上、右下、左下（顺时针方向）。
示例：-
border-radius: 10px 5px 20px 8px;—— 四个角各不相同
也可以使用具体属性单独设置某个角：
立即学习“前端免费学习笔记（深入）”；
border-top-left-radius: 15px;border-top-right-radius: 10px;border-bottom-right-radius: 5px;border-bottom-left-radius: 0;
创建椭圆或胶囊形状
当需要水平和垂直方向有不同的圆角半径时，可以用斜线 / 分隔 X 轴和 Y 轴的半径，形成椭圆角。
用法示例：-
border-radius: 20px / 10px;—— 水平半径 20px，垂直 10px -
border-radius: 50% / 50%;—— 等同于圆形（适合头像、图标）
如果元素宽度较小而高度较高，border-radius: 50% 可以生成胶囊形状。
实用技巧与注意事项
在实际使用中，注意以下几点能避免常见问题：
- 圆角值不能为负数
- 百分比值是相对于元素自身的宽高计算的
- 如果圆角过大（比如超过元素尺寸的一半），浏览器会自动调整以防止重叠
- 圆角会影响背景、边框和阴影的渲染范围，默认情况下都遵循圆角轮廓
基本上就这些。合理使用 border-radius 能让界面更柔和自然，从按钮到卡片布局都很常用。不复杂但容易忽略细节。
