css圆角制作

使用 border-radius 属性

在CSS中，border-radius 属性用于设置元素的圆角。该属性可以接受一个或多个值，用于定义四个角的圆角半径。基本语法如下：

.element {
  border-radius: 10px;
}

这会为元素的四个角设置相同的圆角半径（10像素）。

设置不同圆角半径

可以为四个角分别设置不同的圆角半径。值的顺序为：左上、右上、右下、左下。

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

如果只提供两个值，第一个值应用于左上和右下，第二个值应用于右上和左下。

使用百分比值

border-radius 也可以使用百分比值，尤其适用于创建圆形或椭圆形。例如，将一个正方形元素变为圆形：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

单独控制每个角

CSS允许单独控制每个角的圆角半径，通过以下属性实现：

.element {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

椭圆形状的圆角

通过使用斜杠（/）分隔水平半径和垂直半径，可以创建椭圆形状的圆角：

.ellipse {
  border-radius: 50px / 25px;
}

也可以为每个角单独设置椭圆半径：

.ellipse {
  border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

浏览器兼容性

border-radius 属性在现代浏览器中广泛支持。对于旧版浏览器（如IE8及以下），可能需要使用供应商前缀或替代方案。现代开发中通常无需额外处理兼容性问题。