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

2024-07-11 08:26:28

字体：大中小

来源：转载

供稿：网友

如果说，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生效，对目前高端手机上的浏览器这一项暂时没用，让我们先舍弃它吧。