CSS3使用border-radius属性制作圆角

简介

border-radius属性用于设置元素的圆角半径。

通常，我们使用border-radius来创建圆形或椭圆形的形状，但它也可以用于创建自定义的非对称形状。

语法

具体的语法格式为：

border-radius: <top-left-radius> <top-right-radius> <bottom-right-radius> <bottom-left-radius>;

• <top-left-radius>：左上角半径
• <top-right-radius>：右上角半径
• <bottom-right-radius>：右下角半径
• <bottom-left-radius>：左下角半径

如果应用较少的值，则其余值自动设为相同的值。例如，如果只设置一个值，则四个角的半径都相同。

示例说明

示例 1

下面的示例演示如何使用border-radius属性轻松地创建一个圆形的元素：

<div class="circle"></div>

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #FFA07A;
}

在这个示例中，我们给元素设置了一个width和height，然后使用border-radius:50%将元素设置为圆形。

示例 2

下面的示例演示了如何使用border-radius属性仅将右下角实现为圆形，并将其余的角设置为矩形：

<div class="rectangle"></div>

.rectangle {
  width: 100px;
  height: 50px;
  background-color: #7FFFD4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 50%;
}

在这个示例中，我们使用border-top-left-radius:10px、border-top-right-radius:10px和border-bottom-right-radius:50%属性来设置角。 这使得右下角呈现为圆形(一半的高度)，并将其他角设置为10px的半径。

结论

border-radius属性为我们提供了简单且有用的功能，可以用于创建圆形、椭圆形或自定义形状的元素。 我们可以通过设置每个角的半径来创建非对称形状。