css 制作圆角

使用 border-radius 属性

CSS 的 border-radius 属性是制作圆角的主要方法。可以设置一个或多个值，控制元素的四个角或单独某个角的圆角程度。

.element {
  border-radius: 10px; /* 四个角均为 10px 圆角 */
}

分别设置四个角

通过分别指定四个角的圆角值，可以实现不对称的圆角效果。

.element {
  border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

使用百分比值

border-radius 也支持百分比值，适合需要响应式圆角的场景。

.element {
  border-radius: 50%; /* 圆形效果，常用于头像等 */
}

单独控制某个角

通过指定具体角的属性，可以单独控制某一个角的圆角程度。

.element {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 15px;
}

椭圆角效果

通过斜杠分隔两个值，可以创建椭圆角效果，分别控制水平和垂直半径。

.element {
  border-radius: 50px / 25px; /* 水平半径 50px，垂直半径 25px */
}

结合不同单位

可以混合使用像素、百分比等单位，实现更灵活的圆角效果。

.element {
  border-radius: 10px 20% 30px 40%;
}