圆角边框
border-radius 圆角、椭圆角、四个角独立设置、圆形头像
圆角边框
border-radius 给元素四角添加圆角——从轻微圆角到完美圆形。
学完本章你将： 掌握 border-radius 圆角、椭圆角、四个角独立、圆形。
基本圆角
css
.rounded { border-radius: 10px; } /* 四个角都是 10px */
.small { border-radius: 5px; } /* 轻微圆角 */
.large { border-radius: 20px; } /* 大圆角 */
.pill { border-radius: 50px; } /* 胶囊形 */四个角独立设置
css
/* 左上 右上 右下 左下 */
.different { border-radius: 10px 20px 30px 40px; }
/* 单独设置 */
.box {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}椭圆与圆形
css
/* 椭圆角（水平半径 / 垂直半径） */
.ellipse { border-radius: 30px / 15px; }
/* 圆形（宽高相等 + 50%） */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: tomato;
}
/* 圆形头像 */
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}