border-radius用于设置元素边框圆角，可接受1-4个值表示不同角落的半径，单位为px或%，如：一个值统一四角，两个值对角设置，三个值分别设置左上、右上左下、右下，四个值顺时针定义；也可单独使用border-top-left-radius等属性；支持斜杠分隔的双半径语法实现椭圆圆角，如20px/10px；常用技巧包括用50%创建圆形头像、为图片添加圆角并配合overflow:hidden防止溢出，提升界面视觉柔和度。
在CSS中，border-radius 属性用于设置盒模型中元素边框的圆角效果。通过它可以让矩形元素的四个角变得圆润，常用于按钮、图片、卡片等设计中。
基本语法
border-radius 是一个简写属性，可以同时设置四个角的圆角半径。它可以接受一个到四个值，表示不同角的圆角大小，单位常用 px 或 %。
例如：
-
一个值：四个角相同
border-radius: 10px; -
两个值：第一个为左上与右下，第二个为右上与左下
border-radius: 10px 20px; -
三个值：第一个为左上，第二个为右上和左下，第三个为右下
border-radius: 10px 20px 30px; -
四个值：顺时针顺序（左上、右上、右下、左下）
border-radius: 10px 20px 30px 40px;
单独设置每个角
如果只想设置某个角的圆角，可以使用以下四个独立属性：
立即学习“前端免费学习笔记（深入）”；
- border-top-left-radius：左上角
- border-top-right-radius：右上角
- border-bottom-right-radius：右下角
- border-bottom-left-radius：左下角
示例：
border-top-left-radius: 15px;
椭圆圆角（支持两个半径）
border-radius 还支持设置水平和垂直两个半径，实现椭圆形圆角。语法用斜杠 / 分隔。
例如：
border-radius: 20px / 10px;
表示水平半径为20px，垂直半径为10px。也可以为每个角分别设置两个半径：
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
实用技巧
- 设置
border-radius: 50%可将正方形元素变成圆形，常用于头像显示。 - 对图片使用 border-radius 可以让图片带圆角，需确保父容器或 img 标签本身设置了该属性。
- 配合 overflow: hidden 使用，可确保内容不溢出圆角区域。
基本上就这些。合理使用 border-radius 能显著提升界面的视觉柔和度和现代感。
