CSS之border-radius

你可以通过CSS应用一个border-radius给任何元素“圆角”。你只会注意到是否涉及颜色变化。例如，如果元素的背景颜色或者边框与元素覆盖的不同。(注：即元素的背景颜色或边框颜色与其父元素的颜色存在差异，下面例子中元素的背景颜色和边框呈现浅绿色，而其父元素原色为白色，便于明显观察到圆角)。举个简单的例子：

#example-one {
  border-radius: 10px;
  background: #BADA55;
}
#example-two {
  border-radius: 10px;
  border: 3px solid #BADA55;
}

　　

这确实不再需要了，但是为了绝佳的浏览器支持，你可以添加-webkit-和-moz-前缀。

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

　　

注意这些属性的顺序：首先列出厂商前缀，最后列出非前缀的“ 规范”版本。 这是正确的方法。 边界半径是我们为什么要这样做的一个很好的例子。 在使用border-radius(在其中传递两个值而不是一个值)的更为复杂的版本中，较早的-webkit- 厂商前缀将执行与“规范”版本完全不同的操作。 因此，如果我们盲目地将相同的值复制/粘贴到所有三个属性，则可能跨浏览器看到不同的结果。 了解有关此方案的更多信息。 为了长期保持最佳一致性，最好最后列出“ 规范”版本。

如今，删除前缀并仅使用border-radius十分现实，如此处所述。

如果元素具有图像背景，则会自然地将其剪切到圆角处：

#example-three {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */
}

　　

　　

　　

有时，当存在border-radius时，您会在边框之外看到背景色的“泄漏”。 (看到)。 为了防止这种情况，请使用background-clip：

.round {
  border-radius: 10px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
}

仅使用一个值，边框半径将在元素的所有四个角上相同。 但这不是必须的。 如果愿意，可以分别指定每个角：

.round {
   border-radius: 5px 10px 15px 20px; 
   /* top left, top right, bottom right, bottom left */
}

　　

您还可以指定两个或三个值。 MDN很好地解释了这一点：

如果设置一个值，则此半径适用于所有四个角。

如果设置了两个值，则第一个应用于左上角和右下角，第二个应用于右上角和左下角。

四个值依次应用于左上角，右上角，右下角，左下角。

三个值：第二个值适用于右上角和左下角。

#example-four {
  border-radius: 5px 20px 5px;
  background: #BADA55;
}

　　

您也可以指定圆角的半径。 换句话说，绘制的圆角不一定是完美的圆形，也可以是椭圆形。 这是通过在两个值之间使用斜杠(“ /”)来完成的。

#example-five {
  border-radius: 10px/30px; /* horizontal radius / vertical radius */
}
#example-six {
  border-radius: 30px/10px; /* horizontal radius / vertical radius */
}

　　

注意：Firefox在3.5及更高版本的WebKit浏览器(例如Safari 4)中仅支持椭圆形边框，将“ 40px 10px”错误地视为与“ 40px / 10px”相同。

您可以用百分比指定border-radius的值。 当要创建圆形或椭圆形时，此功能特别有用，但可在您希望边界半径与元素宽度直接相关的任何时候使用。（注：使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度。）

#example-seven, #example-eight {
   border-radius: 50%;
}
#example-eight {
   width: 200px;
}

　　

注意：在Safari中，边框半径的百分比值仅在5.1+中受支持。 在Opera中，仅在11.5+中受支持。

这是每个单独的属性，带有供应商前缀：

.round {
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;
}

　　

注意：这些值中的每个值也可以具有空格分隔的值，例如“ 5px 10px”，其行为类似于速记中的斜杠分隔值(水平半径[空格]垂直半径)。