CSS3小分队-进击的border-radius_html/css_WEB-ITnose

上一篇：《CSS 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>

让我们放大看一下效果：

 

该暴露的都暴露出来了。。。

以上是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至此告一段落，希望能给需要的朋友带来帮助，有新的想法和问题也欢迎讨论，有讲的不对的地方还恳请批评指正。

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