CSS3小分队——进击的border-radius

上一篇：《CSS float属性小解——”浮“生若水》

写在前面：

~~强势插入~~如果有想进一步了解float属性的小伙伴，可以猛戳上面的链接，《CSS float属性小解——”浮“生若水》这篇文章加入了不少自己的想法，用例子讨论了float到底有没有脱离文档流这个问题，也许能给你带来意外的收获哦~~~~~~

下面切入正题。

当CSS3披荆斩棘来到我们面前，我们看到的是一个操作起来更加简便、更加炫目的html世界。如果当CSS3完全盛行起来，当多个主流浏览器开始兼容一个个CSS3属性，那么无论是对于前端开发者，还是对于坐在浏览器前浏览网页的我们，都将是一件非常美妙的事情，那时才是“旧时王谢堂前燕，飞入寻常百姓家”。

对于进击的CSS3小分队，让我们依次掀开它们华丽的面纱。第一个出场的是border-radius。

一、CSS2代码生成圆角

在网页设计中，圆角可以用来美化区域，在css2中，如果我们要制作一个圆角，方法也不少，只不过都相对复杂。比如，最方便的可以用圆角图片，但是会增加http请求，用户体验稍差，没有纯代码来得快捷；用代码的话可以用多个元素层叠的思想来“堆”出一个圆角，但是代码较多，看着就烦。当然还有其他方法，小伙伴们可以发挥奇思妙想，但是应该绝对没有border-radius来得酣畅直接。

不管是不是百战不殆，知己知彼还是很有必要的，所以在此先用CSS2的代码来生成圆角来看看效果：

思路是用多个div进行叠加，从而得到圆角的效果。上面两个角和下面两个角的div类顺序相反即可，主体div来确定区域的大小。代码如下：

HTML Markup

<!--左上角/右上角-->
<div class="r_top">
<div class="r_a"></div>
<div class="r_b"></div>
<div class="r_c"></div>
<div class="r_d"></div>
<div class="r_e"></div>
<div class="r_f"></div>
<div class="r_g"></div>
<div class="r_h"></div>
</div>
<div class="box">
<!-- 主体部分 -->
</div>
<!--左下角/右下角-->
<div class="r_bottom">
<div class="r_h"></div>
<div class="r_g"></div>
<div class="r_f"></div>
<div class="r_e"></div>
<div class="r_d"></div>
<div class="r_c"></div>
<div class="r_b"></div>
<div class="r_a"></div>
</div>

CSS Code

<!--左上角/右上角-->
<div class="r_top">
<div class="r_a"></div>
<div class="r_b"></div>
<div class="r_c"></div>
<div class="r_d"></div>
<div class="r_e"></div>
<div class="r_f"></div>
<div class="r_g"></div>
<div class="r_h"></div>
</div>
<div class="box">
<!-- 主体部分 -->
</div>
<!--左下角/右下角-->
<div class="r_bottom">
<div class="r_h"></div>
<div class="r_g"></div>
<div class="r_f"></div>
<div class="r_e"></div>
<div class="r_d"></div>
<div class="r_c"></div>
<div class="r_b"></div>
<div class="r_a"></div>
</div>

让我们放大看一下效果：

该暴露的都暴露出来了。。。放大后8个div的棱角都显现无遗。也许在浏览网页的时候很少有人会放大好几倍去看，但这至少是一个存在的问题。

以上是用CSS2的一种方法做出来的圆角效果，明显的代码重复，代码繁多，放大后还会有棱角出现。如果要用同样的思路生成一个圆角半径更大的圆角，而且希望得到的圆角效果更加圆润，那么就需要增加更多的标签，更多重复繁多的代码，这并不是我们想看到的。

二、CSS3进击的border-radius

CSS3中加入的border-radius很好的解决了上述的问题，着实给我们带来了极大的便利。首先来看它的语法：

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

border-radius是一种简写属性，用来设置border-*-radius的属性，值可以取数值，也可以取百分数，四个值是按照top-left、top-right、bottom-right、bottom-left的顺序即从上开始顺时针来设置的。下面分八种情况来讨论。

1、border-radius:20px;属性后只有一个值，那么即top-left、top-right、bottom-right、bottom-left圆角半径相等，效果如下：

2、border-radius:20px 40px;属性后有两个值，那么即top-left和bottom-right取第一个值，top-right和bottom-left取第二个值，即对角取值，效果如下：

3、border-radius:20px 30px 40px;属性后有三个值，那么即top-left取第一个值，top-right和bottom-left取第二个值，bottom-right取第三个值，其实还是按照top-left、top-right、bottom-right、bottom-left的顺序即从上开始顺时针来设置的，因为正常情况下top-right和bottom-left取值相等，所以第三个值自然是bottom-right，效果如下：

4、border-radius:20px 30px 40px 50px;属性后有四个值，那么按照按照top-left、top-right、bottom-right、bottom-left的顺序即从上开始顺时针来设置，依次取值，效果如下：

以上为基本的四种取值，接下来列出另外四种取值形式，下面四种形式其实是和上面四种形式没有什么区别的，只是设置了不同的水平半径和垂直半径而已：

5、border-radius:水平半径/垂直半径，即border-radius:20px/40px;即四个圆角均取同一个水平半径和垂直半径，其实属于1的变形，效果如下：

6、border-radius:水平半径1 水平半径2/垂直半径1 垂直半径2,即border-radius：20px 30px/40px 50px;即top-left和bottom-right取水平半径1和垂直半径1，top-right和bottom-left取水平半径2和垂直半径2，其实属于2的变形，效果如下：

7、border-radius:水平半径1 水平半径2 水平半径3/垂直半径1 垂直半径2 垂直半径3,即border-radius：20px 30px 40px/50px 60px 70px;即top-left取水平半径1和垂直半径1，top-right和bottom-left取水平半径2和垂直半径2，bottom-right取水平半径3和垂直半径3，其实属于3的变形，效果如下：

8、border-radius:水平半径1 水平半径2 水平半径3 水平半径4/垂直半径1 垂直半径2 垂直半径3 垂直半径4,即border-radius：20px 30px 40px 50px/60px 70px 80px 90px;即顺时针依次取值，其实属于4的变形，效果如下：

当然，除了像素等单位，还可以用百分号作单位，不要忘记哦~~~~~~~~~

让我们放大效果看一下：

放大以后，圆角依然是像素级别的，一下子感觉整个世界都圆润起来了呢。

当然，border-radius也可以拆开写：

border-top-left-radius: <length>  <length>   //左上角

border-top-right-radius: <length>  <length>  //右上角

border-bottom-right-radius:<length>  <length>  //右下角

border-bottom-left-radius:<length>  <length>   //左下角

PS：对于较老的浏览器请不要忘记添加可恶的浏览器前缀-moz-/-webkit-。

三、这货能干什么

border-radius能干什么就是厨师做菜的问题了，不一样的厨师有不一样的思想，有不一样的手艺，做出来的菜肴也千差万别。

有这样的菜品：

也有这样的菜品：

还有这样椭圆的菜品：

或者来个圆圆的大饼等等：

如上图所示，border-radius为我们生成椭圆和圆提供了很大的便利，也为我们生成更多的图案提供的更多的可能。

四、小了个结

配合其他属性，发挥主观能动性，border-radius可以做出很多优雅的效果。关于border-radius至此告一段落，希望能给需要的朋友带来帮助，有新的想法和问题也欢迎讨论，有讲的不对的地方还恳请批评指正。

~~再次强势插入~~如果有想进一步了解float属性的小伙伴，可以猛戳下面的链接，《CSS float属性小解——”浮“生若水》这篇文章加入了不少自己的想法，用例子讨论了float到底有没有脱离文档流这个问题，也许能给你带来意外的收获哦~~~~~~

下一篇：《CSS3小分队——text分身text-shadow》