CSS 圆角

使用 CSS border-radius 属性，可以轻松的让元素变成圆角。

CSS 圆角属性

CSS 中与圆角相关的属性 5 个。

!! 虽然所有属性中都含有 border 这个词，但是圆角元素不一定要有边框。

CSS 圆角案例

CSS border-radius 属性定义圆角的半径。

具有指定背景颜色的圆角元素

#rcorners1 {
  border-radius: 25px;
  background: #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

带边框的圆角元素

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

带有背景图像的圆角元素

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

CSS border-radius 属性说明

border-radius 属性是 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 四个属性的简写属性，值可以是 1 到 4 个值。

• 4 个值 - border-radius: 15px 50px 30px 5px;; 第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角。相当于如下分别定一个各个方向角的半径。

  border-top-left-radius: 15px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 30px
  border-bottom-left-radius: 5px;
  

• 3个值 - border-radius: 15px 50px 30px;; 第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角。相当于如下分别定一个各个方向角的半径。

  border-top-left-radius: 15px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 30px
  border-bottom-left-radius: 50px;
  

• 2 个值 - border-radius: 15px 50px;; 第一个值适用于左上角和右下角，第二个值适用于右上角和左下角。相当于如下分别定一个各个方向角的半径。

  border-top-left-radius: 15px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 15px
  border-bottom-left-radius: 50px;
  

• 1个值 - border-radius: 15px;; 四个角具有相同的半径。

CSS 椭圆圆角

使用 CSS 创建椭圆圆角的例子。

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73ad21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

这里简单解释一下 border-radius: 50px / 15px;。 这个属性表示四个角的半径是一样的，拿左上角 border-top-left-radius: 50px / 15px; 举例，左上角上(top)边的圆角半径是 50px，左(left)边的圆角半径是 15px。