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,是降低平铺资源消耗还是节约流量
请自己把握,这个你懂的:
这个按钮完整的代码是这样的:
<style type="text/css"> .btn-send{ display:inline-block; background:url(blogimg/btn_bg.png) left top repeat-x; border:1px solid #96b9de; -webkit-border-radius:3px; -moz-border-radius:3px; height:28px; line-height:28px; padding:0 9px; text-decoration:none; color:#000000; font-size:12px; font-weight:bold; text-shadow: 0px 0.5px 0.5px #FFFFFF; } </style> <a href="#" class="btn-send">发私信</a>
其中-webkit开头的属性针对webkit内核浏览器生效,就是我们的iPhone、
Android高端机自带浏览器,-moz开头的属性
主要是因为一般调试都是在firefox下进
行,为调试时展示正常效果而加。有些人还会再加个border-radius,这个大概对
Chrome和
ie9生效,对目前高端手机上的浏览器这一项暂时没用,让我们先舍弃它吧。
另外,需要说明的是,border-radius,顾名思义,是要有border,才有radius,
设置border-radius时,border-width不能为0。而类似这样直接给图片定义圆角的设
计,赶紧给我住手!
其中,对于一些只有半边有圆角的对象,还可以单独定义,webkit和moz下单独定
义每个圆角的属性分别如下:
-webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px;
而border-image适合背景不能完全平铺、填充色值的圆角元素。顾名思义,这个属
性其实就是用一张基本圆角图片来实现圆角的效果,例如这些:
这类元素或多或少,因为一两个像素的阴影、发光效果不能完全平铺,就可以利用
border-image的九宫格原理,由一张图片来定义背景、边
框、圆角。这种做法的缺陷
是边框、圆角和背景都是图片上固定的,只能水平或垂直拉伸元素宽度,不能直接通过
css修改角度和元素高度或宽度。尽管如此,我
们还是要感谢这个css属性带来的全新体
验。
以这个按钮为例:
它的背景是这样一个内发光、阴影的样式,平铺的话阴影还好说,但是左侧的内发光就
不好处理:
border-image的原理,是将这类图片分解成一个九宫格:
其中1、3、7、9作为四个角的背景;
2、4、6、8作为四个边的背景,如果不想改变原有按钮设计质感,只能2、8横向拉伸;
中间的5作为中间部分的背景,同样,要保持设计质感,只能横向拉伸。
border-image的具体写法是:
-webkit-border-image:url(blogimg/border.png) 5 5 5 5 repeat repeat; -moz-border-image:url(blogimg/border.png) 5 5 5 5 repeat repeat;
其中第一个参数是图片路径;
第2-5个参数是九宫格分割时分别距离上、右、下、左的距离,可以简写成1-3个,注
意,这里的数值没有单位(几次效果没出来,查了半天发现都是因为这里习惯性的加了
px,杯具),但是可以使用百分比;
最后两个参数是图片x、y方向重复的方式,有round(平铺),repeat(重复),
stretch(拉伸)三种方式,默认是stretch,可简写成0-1个。
对于我们常用的按钮来说,在横向无论平铺、重复,还是拉伸,效果都是一样的。
这个按钮完整的代码是这样的:
<style type="text/css"> .btn-more{display:inline-block; -webkit-border-image:url(blogimg/btn_2_bg.png) 5; -moz-border-image:url(blogimg/btn_2_bg.png) 5; border-width:5px; height:27px; line-height:27px; padding:0 60px; text-decoration:none; color:#FFFFFF; font-size:13px; font-weight:bold; text-align:center; text-shadow: 0px 0.5px 0.5px #000000; }</style> <p><a href="#" class="btn-more">查看更多</a></p>
注意,这里border-width必须配合使用,分别对应九宫格分隔出来的四条边的宽度。其
实即使是九宫格分割出来了4条边,我们完全可以不使用
其中任何一条,只要将这条边
的border-width设置为0即可,这对用一张完整的圆角图片实现一对个半圆角按钮是很
有用的:
另外,在有border-image的情况下,定义其他样式的border都是无效的。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。