理解CSS3线性渐变
作者:vocal 来源:前端观察 时间:2010-03-28 13:42:00
为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。
PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法观看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE
Webkit
尽管Mozilla和Webkit通常对CSS3属性采取同样的语法,但是对于渐变,他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:
/* Syntax, taken from: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))
标签:CSS3,渐变,线性,浏览器
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
asp Driver和Provider两种连接字符串连接Access时的区别
2011-03-09 11:19:00
怎么样才能设计出漂亮的网页?
2008-10-07 16:57:00
SQL Server中删除重复数据的几个方法
2009-10-30 10:50:00
ASP中的Debug类--VBScript
2008-10-24 09:38:00
sqlserver 脚本和批处理指令小结
2012-05-22 18:56:55
设计可以量化吗?
2009-06-12 12:12:00
电子商务搜索LIST页面用户体验设计
2010-08-03 12:57:00
![](https://img.aspxhome.com/file/UploadPic/20108/3/20108313022804s.jpg)
CSS hacks与争议
2007-11-19 12:56:00
![](https://img.aspxhome.com/file/UploadPic/200711/19/20071119125952144s.gif)
快速解决SQL server 2005孤立用户问题
2009-01-04 14:02:00
精细讲述SQL Server数据库备份多种方法
2009-01-13 13:33:00
巧用overflow属性解决中间间距问题
2007-12-08 20:26:00
![](https://img.aspxhome.com/file/UploadPic/200712/8/2007128203846552s.gif)
“)”引起PNG透明滤镜失效
2008-08-11 13:10:00
关于设计品质保证(DQA)的几点想法
2007-11-16 16:55:00
SQL根据时间范围条件查询数据
2009-01-18 13:32:00
SQL Server 2008数据挖掘查询任务
2009-03-16 16:50:00
保存透明gif时出现锯齿解决法
2008-06-26 18:10:00
![](https://img.aspxhome.com/file/UploadPic/20086/26/2008626181821662s.gif)
将Reporting services的RDL文件拷贝到另外一台机器时报Data at the root level is invalid的解决方法
2012-07-11 15:33:45
![](https://img.aspxhome.com/file/UploadPic/20127/11/2012711161745913s.png)
如何用Cookie进行登录验证?
2010-06-12 12:34:00
数据库分页大全(mssql,mysql,oracle)
2010-10-25 20:02:00
一种弹出提示信息时页面背景色调改变的方法
2008-12-01 12:22:00