小提醒：领略CSS3 的线性渐变

译自：Quick Tip: Understanding CSS3 Gradients
中文：领略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))

  （编辑：河北网）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!