理解CSS3线性渐变
作者：vocal 来源：前端观察 发布时间：2010-03-28 13:42:00
标签：CSS3,渐变,线性,浏览器
为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏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))
0
投稿猜你喜欢
- 举例如下，一个服务器端的form 代码自动被解释成客户端代码：服务器端代码： &l
- 在blueidea上看到movoin转的一个动态加载include文件代码，接着dnawo又修改了下，我用了dnawo修改后的版本，感觉挺好
为什么很多站长开始做英文网站，我想主要是原因是良好的互联网环境让大家更容易赚到钱，中小站长做英文网站大致为两类，一是电子商务的外贸网站，二是- 方法如下： response.cookies(cookiesname)[(key)|.attribute]=value 解释如下：cooki
- 一个ASP文件通常包含HTML标签，有时和一个HTML文件非常类似。然而，ASP文件（除了包含HTML标签外），还可以包括服务器的脚本程序，
- 经常用FLASH嵌入到网页里面，那咋能躲过W3C那个家伙呢？看下面！<object type="applicati
- 可以使用 XDR（简化 XML-Data）架构创建关系数据的 XML 视图。然后可以使用 XPath 查询来查询这些视图。这类似于使用 CR
- <％ If Err.Number <> 0 Th
- 1. 排序有什么用“排序”这个专业名词原本是来源于计算机程序操作中的，是一种很常见的算法设计，当然，对交互设计来说，探讨冒泡排序和堆排序之间
- Oracle 的正规表达式的实施是以各种 SQL 函数和一个 WHERE 子句操作符的形式出现的。如果您不熟悉正规表达式，那么这篇文章可以让
- 你的设计为什么平平无奇，为什么吸引不到别人的眼球，这里先来说说什么是焦点（也可以称兴趣中心或者视觉中心），我认为用焦点更能简单准确的阐述。有
- 在ASP编程中，身份认证可以说是常要用到的。但怎么样才能做到认证的安全呢？表单提交页面：sub.htm &
- 学习目的： 掌握文本框的用法 初次接触try…catch…语法 今天内容很轻松，用一个例子，输入年月日，判断输入是否正确 图片如下： 用个
- 如何准确获知对方来访问的时间和URL？代码如下：logfile.asp<％Dim ValidLog '&n
- 下面这个函数使用FSO对象来判断服务器上的某个文件是否存在：<％Private Function Dir(byVa
- 沟通的时候，一般我不主动说自己是做用户体验设计，也不说做以用户为中心的设计，包括UED, UCD。这种专业名词传达的太虚，你也许是名用户体验
- 使用MySQL进行数据库备份，有很正规的数据库备份方法，同其他的数据库服务器有相同的概念，但有没有想过，MySQL会有更简捷的使用文件目录的
- 当我们使用访问一个没有声明的变量时，JS会报错；而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式申明一个全局变量。
- 在IE比较简单，大家都知道用setHomePage来设置，懒人写法：<a href="#setHomePage"
- 同质化的网站越来越多，往往你还没发展起来，就已有许多站点抄袭走了你的成果，如何留下用户？——让用户有更好的使用体验。一些网页上的小技巧，可以
