提示

本文主要讲解 CSS 属性圆角的使用。@ermo

CSS3 圆角

• CSS3 圆角

使用 border-radius 属性，可以给元素添加圆角样式。

看一个简单例子。

corners1 为有背景颜色的盒子添加圆角。

corners2 为有边框的盒子添加圆角。

corners3 为有背景图的盒子添加圆角。

.corners1 {
  width: 200px;
  height: 150px;
  background-color: pink;
  padding: 20px;
  border-radius: 25px;
}
.corners2 {
  border-radius: 25px;
  border: 2px solid #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
.corners3 {
  border-radius: 25px;
  background: url(../assets/paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

border-radius 和 margin 一样，属于一个复合属性，对应下面四个属性：

• border-top-left-radius：左上角圆角设置
• border-top-right-radius：右上角圆角设置
• border-bottom-right-radius：右下角圆角设置
• border-bottom-left-radius：左下角圆角设置

border-radius 取值同样有4种写法：

• 四个值：顺序为左上、右上、右下、左下
• 三个值：顺序为左上、右上和左下、右下
• 两个值：顺序为左上和右下、右上和左下
• 一个值：代表四个角都是当前值

看一个简单示例：

.corners4 {
  border-radius: 15px 50px 50px 15px;
  border: 2px solid #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
.corners5 {
  border-radius: 15px 50px 15px;
  border: 2px solid #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
.corners6 {
  border-radius: 15px 50px;
  border: 2px solid #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
.corners7 {
  border-radius: 15px;
  border: 2px solid #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}