CSS3学习笔记之border-radius_html/css_WEB-ITnose

我觉得CSS3很不错，自己也稍微看过，并且尝试过一些属性。对我自己而言，我没有勇气说我学过CSS3，我觉得任何自己看来很小的事情，也只是站在自己的角度来评判。就算的是“简单的”HTML在我看来也是很值得研究的，只有时刻保持一个谦逊的姿态，才能够看得更远，走得更稳。

在这里要感谢一下网站：

w3cplus，W3School ，W3C 等等一些网上的教程啊博客什么的（还有好多就不一一列举了），我算是从这些地方开始接触传说中的CSS3和HTML5，而自己的学习笔记自然也会从中借鉴。

今天介绍的是CSS3的圆角 ：border-radius

 

遥想当年……在CSS2的基础上做圆角还能算得上是门学问！！各种图片、各种嵌套（《精通CSS??高级web标准解决方案》中有介绍，过程在这就不说了，网上一查就查得到，总之就是：没用CSS3之前觉得很高端，用了CSS3之后就不想再看到它了）

但是自从CSS3的圆角属性border-radius出现之后，广大前端工程师可以省去了很多烦恼，不仅减少了工作量，还能提高网站的性能。只可惜高贵的低版本IE不支持CSS3的绝大部分属性……或者说几乎都不支持，虽然牛人们有写很多针对IE的兼容方案，但是我不推荐用。圆角很多时候只是在视觉上更优雅，基本不影响用户使用。

你看不到圆角只能怪你和低版本IE做朋友！！！！

好，现在开始正式介绍这个高贵的属性

border-radius的用法：

属性名	border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius,border-radius
属性值	长度（eg:10px）
初始值	0
可否继承	不能继承

border-radius中的值的大小决定了圆弧的形状，每个角的圆弧其实就是以在这个角上设定的值的大小为半径画出的圆的1/4弧线。

举个栗子：当border-radius只有一个值的时候

设置border-radius：50px；

CSS代码：

1: .test{

2:     width:200px;

3:     height:200px;

4:     background:#368;

5:     margin:80px auto;/*为了使元素居中，没有别的意思*/

6:     -webkit-border-radius:50px;

7:     -moz-border-radius:50px;

8:     -o-border-radius:50px;

9:     border-radius:50px;

10: }

HTML代码：

<p> 1: <div class="test"></div></p>

效果如下：

为使得效果更加明显，现在将border-radius的值修改为100px，也就是div.test的宽度的一半：

可以看到，现在变成一个完整的圆形了！！！！如果我们过圆心，分别在水平方向和竖直方向各做一条线就能看出，其实每个角的圆弧其实就是以这个值为半径画出的圆的1/4弧线。

 

再举个栗子：当border-radius有多个值的时候

设置border-radius：100px 50px；(代码和上面的类似，只是修改了border-radius，故不在重复)。

经测试，在我的谷歌，火狐，IE9，10下效果如下

如果我们像上图一样。将左上角定为“左”，右上角定位“右”，以此类推，会发现两个值的border-radius的规则就像是margin，padding的规则一样：第一个值表示上下，第二个值表示左右。

同理设置border-radius：100px 50px  0px；

效果如下：

 

设置border-radius:100px 50px 25px 0px；

经测试，效果如下

，

就像之前说的一样，border-radius值的设定就像padding，miargin一样，很简单。

好的，现在来总结一下的使用：

只有一个值的时候，四个角都以相同的弧度成圆角。 只有两个值的时候，第一个值表示左上角和右下角，第二个表示右上角和左下角 有三个值的时候，第一个值表示左上角，第二个值，也就是中间的值白哦是右上角和左下角，第三个值表示右下角 有四个值的时候，按照左上，右上，右下，左下的顺序表示

 

 

全文到此结束，有错误的地方欢迎指正!!