C

CSS3 线性渐变

unicac 学习分享 2011-10-19

据我们所知,我们都曾使用过颜色渐变来美化站点和为站点增色,而如果你想创建一个具有精制外观的按钮、面板、进度条或者其他UI界面,那么颜色渐变是必要。

到目前为止,我们一般是平铺背景图片来制造渐变效果。其CSS语句很简单,用Photoshop, Fireworks或其他图形工具来做一个渐变图片也不是一件难事。然后这种方式是相当地不灵活。假设你想要不同的配色方案或者其他渐变效果,你需要重返你的图形工具制作另一张图片。那么如果你可以完全使用CSS控制颜色渐变岂不是更好?

CSS Image Values and Replaced Content Module Level3中CSS3提出了解决方法:这些模块定义了CSS渐变,它允许我们用纯CSS打造任何渐变。在这篇文章,我将提出怎样使用线性和多次线性渐变。目前Opera 11.10+, Firefox 3.6+, Safari 5.03+ 和 Chrome 7+支持。

Note:径向渐变暂不被Opera支持,且效果也有点不同。我们在后期会把它加入支持当中且为它单独撰写一篇文章。IE9目前还不支持CSS渐变,但是你可以在IE9中用SVG渐变来弥补IE9这个缺陷。

Gradients demo例子中,我提供了一些简单的例子供你试验。在通读以下的章节后,你可以把这些示例下载下来,试试修改不同的参数看看都有什么好玩的效果。在代码里,你会发现我给不同的版本加上不同的供应商前缀来支持不同浏览器。这个例子能通过新版的opera, Firefox, Safari和Chrome。

做一个基本的线性渐变,需要提供一个起点值和结束值,例如

background-image: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));

如Figure1所示,创建了一个从顶到底的深灰色到浅灰色的渐变。这边我只是把它应用到一个article元素里,你可以应用到任何你所喜欢的block元素上。

figure1.pngFigure 1: A really basic CSS3 linear gradient.

为什么渐变是写到background image而不是看起来更为合理的background color?这是出于灵活和使用者的习惯考虑。过去我们总是通过CSS背景图片来实现渐变,而现在只要你喜欢,你可以使用CSS将颜色渐变应用于多个图片背景层。

继续浏览CSS3 线性渐变-不同渐变角度

评论(2)