当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

CSS3实战一:让我们尽情的圆角吧

  如果说,WAP2.0网页的机型、浏览器适配给我们无线制作经理造成了巨大的心理阴影,那么从iPhone、Android这些高端手机应用 起,我们终于可以庆幸比其他同行提前迎来了一个新时代,这两种高端手机上的Safari Mobile和Google Android浏览器近乎完美的渲染效果,让css3有了尽情挥洒的天地。

  在没有css3 以前,或者说,在webkit没有占绝对的优势以前,圆角对于制作经理来说,都是一个纠结的死角。九宫格、N层div嵌套、一个图片的十八般切法,甚至不 惜恐吓威胁设计师:你再做圆角,我就死给你看!好吧,到了高端手机时代,这一切恩怨都可以抛下了,一个html元素、几行css,全部搞定。现在我们可以 拥抱设计师,大声宣布:让我们尽情圆角吧!事情要从我们无线的第一个高端手机web应用——手机微博高端版说起,作为一个完全针对高端手机的web项目, 经过我们初步测试,css3的绝大多数属性都能在iPhone、Android这些高端手机自带浏览器上完美表现,那么,此时不用更待何时?!于是,我们 的设计gg就有了一次痛快淋漓的圆角体验,请看这些圆角们:

  

 

  css3新增实现圆角的方法有2种,border-raidus和border-image,前一种合适背景是纯色填充,或能规律平铺,且有纯色border的元素,例如这些:

  

 

  对于这类圆角元素,我们只需定义背景、边框和圆角角度。以这个按钮元素为例:

  

 

  背景切片btn_bg.png,图片宽度从1px到100px,是降低平铺资源消耗还是节约流量请自己把握,这个你懂的:

  

 

  这个按钮完整的代码是这样的:

   发私信

  其中-webkit开头的属性针对webkit内核浏览器生效,就是我们的iPhone、Android高端机自带浏览器,-moz开头的属性 主要是因为一般调试都是在firefox下进行,为调试时展示正常效果而加。有些人还会再加个border-radius,这个大概对Chrome和 ie9生效,对目前高端手机上的浏览器这一项暂时没用,让我们先舍弃它吧。

  另外,需要说明的是,border-radius,顾名思义,是要有border,才有radius,设置border-radius时,border-width不能为0。而类似这样直接给图片定义圆角的设计,赶紧给我住手!

   炫 浪 学 院

相关内容
赞助商链接