你的位置:首页 > 软件开发 > 网页设计 > CSS3小分队——进击的border

CSS3小分队——进击的border

发布时间:2015-07-02 23:00:39
上一篇:《CSS float属性小解——”浮“生若水》~~强势插入~~如果有想进一步了解float属性的小伙伴,可以猛戳上面的链接,《CSS float属性小解—&mdas ...

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

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

下面切入正题。

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

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

一、CSS2代码生成圆角

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

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

 CSS3小分队——进击的border

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

HTML Markup

CSS3小分队——进击的borderCSS3小分队——进击的border
<!--左上角/右上角--><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>

原标题:CSS3小分队——进击的border

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。