CSS3 圆角效果

下面是关于CSS3 圆角效果的完整攻略。

什么是CSS3 圆角效果？

CSS3 圆角效果是CSS3中一个常用的属性，用来实现将元素的边框变成圆角的效果，常用作美化页面、提升用户体验等。

如何使用CSS3 圆角效果？

语法说明

CSS3 中使用 border-radius 属性实现元素的圆角效果。

border-radius: 【1】 【2】 【3】 【4】;

该属性包含四个值，它们分别代表四个角的圆角大小：

• 【1】 ：左上角圆角半径大小；
• 【2】 ：右上角圆角半径大小；
• 【3】 ：右下角圆角半径大小；
• 【4】 ：左下角圆角半径大小。

当四个值均为相等取值时，就可以实现等半径圆角效果。

示例说明

实现一个圆形的按钮

下面的示例通过将按钮的四个角的半径设置为50%来实现一个圆形按钮：

<button class="btn">点击我</button>

.btn {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: #3A86FF;
  color: #fff;
  font-size: 16px;
  border: none;
}

实现不同圆角大小的方框

下面的示例通过不同的取值实现元素四个角的圆角大小不同的效果：

<div class="box">我是一个方框</div>

.box {
  border-radius: 20px 50px 80px 10px;
  width: 200px;
  height: 100px;
  background-color: #F8B400;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

在该示例中，元素的四个角分别设置了不同的圆角半径，从左上角依次为 20px、右上角为 50px、右下角为 80px、左下角为 10px。

总结

CSS3 圆角效果是CSS3中一个常用的属性，可以用来实现元素的圆角效果。通过设置不同的取值，可以实现不同大小和不同形状的圆角效果。