CSS3 圆角

在CSS3中，可以通过 border-radius 属性来创建元素的圆角。这个属性可以设置一个或四个值来指定每个角的圆角大小。

设置圆角大小

设置所有角的圆角：

.element {
    border-radius: 10px; /* 所有角都是10像素的圆角 */
}

分别设置每个角的圆角:

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

使用简写语法

可以使用简写语法来设置所有四个角的圆角，按照顺时针的顺序分别指定每个角的半径大小：

.element {
    border-radius: 10px 15px 20px 25px;
}

• 第一个值：左上角
  

• 第二个值：右上角

• 第三个值：右下角

• 第四个值：左下角

如果只指定两个值，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。

圆形元素

要创建一个完全圆形的元素，可以将 border-radius 设置为元素宽度的一半，或者使用百分比值：

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 或者 border-radius: 50px; */
}

这样就可以根据需要在网页中创建各种不同的圆角效果了！