你的位置:首页 > 网页设计

[网页设计]CSS3小分队——进击的border


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

View Code

CSS Code

<!--左上角/右上角--><div ><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div></div><div ><!-- 主体部分 --></div><!--左下角/右下角--><div ><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div></div>

View Code

让我们放大看一下效果:

 

该暴露的都暴露出来了。。。放大后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》