Heim >Web-Frontend >HTML-Tutorial >CSS3小分队-进击的border-radius_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:42:031238Durchsuche

上一篇:《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属性小解??”浮“生若水》

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn