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


Posted in HTML / CSS onAugust 27, 2010

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

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

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

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

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

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

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

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

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

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

<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。而类似这样直接给图片定义圆角的设计,赶紧给我住手!

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

其中,对于一些只有半边有圆角的对象,还可以单独定义,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适合背景不能完全平铺、填充色值的圆角元素。顾名思义,这个属性其实就是用一张基本圆角图片来实现圆角的效果,例如这些:

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

这类元素或多或少,因为一两个像素的阴影、发光效果不能完全平铺,就可以利用border-image的九宫格原理,由一张图片来定义背景、边 框、圆角。这种做法的缺陷是边框、圆角和背景都是图片上固定的,只能水平或垂直拉伸元素宽度,不能直接通过css修改角度和元素高度或宽度。尽管如此,我 们还是要感谢这个css属性带来的全新体验。

以这个按钮为例:

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

它的背景是这样一个内发光、阴影的样式,平铺的话阴影还好说,但是左侧的内发光就不好处理:

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

border-image的原理,是将这类图片分解成一个九宫格:

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

其中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即可,这对用一张完整的圆角图片实现一对个半圆角按钮是很有用的:

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

另外,在有border-image的情况下,定义其他样式的border都是无效的。

好吧,最后,按照惯例,我们要感谢国家、感谢组织、感谢iPhone、感谢乔布斯,让我们有了这一次伟大的实践机会!愿web标准早日一统天下,我们才能真正畅享css3的美好世界!

(本文出自Tencent WSD Blog,转载时请注明出处)

HTML / CSS 相关文章推荐
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 #HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 #HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 #HTML / CSS
css3 border-image使用说明
Jun 23 #HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 #HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 #HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 #HTML / CSS
You might like
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
详解php的socket通信
2015/08/11 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Python实现一个论文下载器的过程
2021/01/18 Python
商务日语毕业生自荐信
2013/11/23 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
母婴店促销方案
2014/03/05 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
小学教师教育随笔
2015/08/14 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers