CSS渐变色效果的实现方法与效果演示

CSS渐变色(Gradients)也是一个相似的技术。如今火狐，谷歌浏览器，Safari，IE8+都支持这种技术，咱们能够安全的在网站上使用它。下面咱们来看看CSS渐变色(Gradients)技术基本的语法，浏览器支持状况和缺陷。

观看演示

CSS渐变色(Gradients)术语和解释

CSS渐变色(Gradients)能让咱们用一种颜色渐变的效果修饰一个空间——从一种颜色过渡到另一种颜色——填充这个空间。渐变色有两个形式：linear(线性渐变) 和 radial (环形渐变)。很显然CSS渐变色(Gradients)技术是产生了一种视觉图案效果，而实现这种视觉效果很简单，能经过简单编程实现。CSS3里很早就引入了CSS渐变色(Gradients)，但这种技术的推广却经历了很长时间。

CSS颜色线性渐变的语法

CSS颜色线性渐变的语法在各类浏览器里的实现稍微有些不一样，但最后是统一标准的：

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

第一个参数是渐变起始点或角。第二个参数是一种颜色中止点(color stops)。至少须要两种颜色(起点和终点)，你能够添加任意种颜色来增长颜色渐变的丰富程度。对颜色中止点的定义能够是一种颜色，或一种颜色加一个百分比：

/*  color-stop(percentage/amount, color) */color-stop(0.20, red)

由于CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，因而每种浏览器对这种技术的实现都添加了一些本身的特点。例如以WebKIt为渲染引擎的谷歌浏览器，就对它实现了多种语法。下面的这段代码基本包括了全部自顶向下颜色渐变的全部状况：

#example1	{
	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
	/* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);}

注意，咱们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，而不只仅只有直上直下或直左直右。咱们能够用下面的语法实现它：

#example2	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);}

咱们能够作的更复杂些….一个色彩缤纷的CSS颜色渐变？下面咱们来作一个彩虹：

/* example 3 - linear rainbow */#example3	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
	/* ie10 */
	background-image: -ms-linear-gradient(red, green, blue, purple, orange);
	/* opera 11.1 */
	background-image: -o-linear-gradient(red, green, blue, purple, orange);
	/* The "standard" */
	background-image: linear-gradient(red, green, blue, purple, orange);}

关于IE对CSS颜色渐变技术的支持作一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改成了-ms-linear-gradient语法。咱们可使用CSS里条件判断语句来解决这个问题：

<!--[if lt IE 10]>
<style>
.gradientElement {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->

不是很理想，但这对设计一个网站很重要。

CSS环形颜色渐变(Radial Gradients)

CSS环形颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不同，它不是沿着一个方向渐变，而是以一个点为中心，向四周辐射渐变，360度的。目前除了IE外的全部浏览器都支持CSS环形颜色渐变(Radial Gradients)，但它们也都有各自不一样的语法…..我说的就是你，WebKit引擎的浏览器，WebKit曾经完全修改了它的CSS环形颜色渐变(Radial Gradients)的语法。下面咱们来看看老式的写法：

/* basic */background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));/* color stops */background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

而如今WebKit(主要表明是谷歌浏览器)里的新语法跟火狐浏览器的彻底一致了：

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)

这种环形颜色渐变语法是最新的火狐和谷歌浏览器使用语法。还有一些常量可使用在这种渐变技术中来设定渐变环形的大小：

• closest-side: 对于原型，是指渐变图形扩散时须要到达的最近的一个边。对于椭圆，是指横向或纵向中要达到最近的一个边。

• closest-corner: 是指渐变图形扩散时须要到达的最近的一个角

• farthest-side: 跟 closest-side 类似，但到达到的是最远的一个边。

• farthest-corner: 是指渐变图形扩散时须要到达的最远的一个角

• contain: closest-side的同义词.

• cover: farthest-corner的同义词

环形颜色渐变(Radial Gradients)的一个基本的用法是这样的：

#example4 {
	background-image: -moz-radial-gradient(orange, red);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
	background-image: -webkit-radial-gradient(orange, red); /* new syntax */
	background-image: radial-gradient(orange, red);}

上面的例子没有设定位置和大小——只有两个颜色中止点。实际是可使用无数颜色，就像下面咱们制做的彩虹：

#example5 {
	background-image: -moz-radial-gradient(red,green,blue,purple,orange);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
	background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
	background-image: radial-gradient(red, green, blue, purple, orange);}

咱们实现一个更复杂的，加上位置信息和更多的颜色中止点：

#example6 {
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);}

注意上面使用的颜色写法和长度的单位。是事实上你可使用任何颜色写法或长度单位。

CSS颜色渐变(Gradients)的技巧和提示

CSS颜色渐变(Gradients)技术颇有价值，但有时很难实现。有时你已经实现了想要的渐变，而浏览器的支持也会成为一个问题。下面是一些使用CSS颜色渐变(Gradients)的建议：

• 想让你的CSS颜色渐变(Gradients)表现必定的透明度？使用 rgba 颜色。

• 使用背景色垫底，这样防止当浏览器不支持时不注意没有任何颜色。

• 火狐浏览器和谷歌浏览器都支持repeating-linear-gradient 和repeating-radial-gradient，用法是：

  #example7 {
  	background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
  	background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);}

• 若是你对渐变效果要求很严格，例如图表，动画，我推荐你使用Dojo的GFX程序包，它是建立矢量图的利器。并且对IE的支持也很是好！

CSS颜色渐变底色

老式浏览器，例如IE6，IE8或早期的火狐，并不支持渐变色技术，因此，你最好设置一个缺省的底色，当遇到不支持的浏览器时，background颜色就起到做用了：

/* example 1 - basic */#example1	{
	/* fallback */
	background-color:#063053;
	/* gradients below */}

对于不支持的浏览器的另一种方法是先用新式浏览器实现这个效果，而后截图，而后使用CSS条件判断来调整输出方式。

观看演示

CSS颜色渐变技术是CSS的一种发展进化的结果，随着现代浏览器技术的愈来愈成熟，咱们能更自信的使用这种技术了。