CSS3 圆角（border-radius）详解

使用过CSS3的border-radius属性很久了，但是总结感觉一知半解，今天终于学些了清楚了一些原理，现在对齐整理如下：

在W3School中介绍了border属性，但介绍的过于简单。

传统的圆角生成方案，必须使用多张图作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：

• Ÿ   减少维护的工作量。图片文件的生成，更新，编写网页代码，这些工作都不在需要了。

• Ÿ   提供网页性能。由于不必在发出多余的http请求，网页的载入速度将变快。

•    增加视觉可靠性。某些情况下（网络阻塞，服务器出错，网速过慢等等），背景图片会下载失败，导致视觉效果不佳。

CSS3就不会发生这种情况。

CSS3 圆角只需设置一个属性：border-radius(含义是“边框半径”)。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em, ex，pt, px, 百分比等等。
比如，下面时一个div方框(width:200px; height:200px)：

现在设置它的圆角半径为20px:

 (border-radius:20px)

这条语句同时将圆角的“水平半径”(horizontal radius) 和“垂直半径”(vertical radius)都设置为20px。

        border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都是用这个值。如果设置两个值，表示左上角和右下角是用第一个值，右上角和左下角是用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角是用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角，右上角，右下角，左下角（顺时针顺序）。

下面是设置不同的值对应的图形(上面是图形，下面是对应的属性值)：

(border-radius:40px)

    

     (border-radius:40px/20px)

(border-radius:40px 20px;)

 (border-radius:40px 20px 10px)

(border-radius:40px 30px 20px 10px)

border-radius:100px

看了这两篇博文以后，才算真的懂了这个属性的用法：

CSS3圆角详解：border-radius

css3经典教程系列：CSS3圆角(border-radius)详解

学到知识点总结：

1：border-radius是设置角的（一个四边形每个角的形状）

2：有关此属性的兼容性问题

3：不同属性值对四个角不同的影响

最主要的是知道这张图（知道了这个拐角是如何形成的）：

对于四边形的每个角可以设置垂直弧度和水平弧度