CSS渐变色效果的实现方法 – CSS – 前端，css 谷歌浏览器字体大小

省略css，css border固定，css 上下翻页效果，css图片怎样并排显示，app底部菜单固定css，css3书页试轮播，css 谷歌浏览器字体大小 CSS渐变色效果的实现方法 - CSS - 前端，css 谷歌浏览器字体大小

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;
	/*chrome2+,safari4+;multiplecolorstops*/
	background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#063053),color-stop(0.66,#395873),color-stop(0.83,#5c7c99));
	/*chrome10+,safari5.1+*/
	background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
	/*firefox;multiplecolorstops*/
	background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);
	/*ie6+*/
	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);
	/*opera11.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;
	/*chrome2+,safari4+;multiplecolorstops*/
	background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#063053),color-stop(0.66,#395873),color-stop(0.83,#5c7c99));
	/*chrome10+,safari5.1+*/
	background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99);
	/*firefox;multiplecolorstops*/
	background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99);
	/*ie10*/
	background-image:-ms-linear-gradient(45deg,#0630530%,#395873100%);
	/*opera11.1*/
	background-image:-o-linear-gradient(45deg,#063053,#395873);
	/*The"standard"*/
	background-image:linear-gradient(45deg,#063053,#395873);}

大家可以做的更复杂些….一个色彩缤纷的CSS颜色渐变？下面大家来做一个彩虹：

/*example3-linearrainbow*/#example3	{
	/*fallback*/
	background-color:#063053;
	/*chrome2+,safari4+;multiplecolorstops*/
	background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.20,red),color-stop(0.40,green),color-stop(0.6,blue),color-stop(0.8,purple),color-stop(1,orange));
	/*chrome10+,safari5.1+*/
	background-image:-webkit-linear-gradient(red,green,blue,purple,orange);
	/*firefox;multiplecolorstops*/
	background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);
	/*ie10*/
	background-image:-ms-linear-gradient(red,green,blue,purple,orange);
	/*opera11.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里条件判断语句来解决这个问题：

<!--[ifltIE10]>
<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,centercenter,0,centercenter,220,from(orange),to(red));/*colorstops*/background-image:-webkit-gradient(radial,centercenter,0,centercenter,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,centercenter,0,centercenter,220,from(orange),to(red));/*old*/
	background-image:-webkit-radial-gradient(orange,red);/*newsyntax*/
	background-image:radial-gradient(orange,red);}

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

#example5{
	background-image:-moz-radial-gradient(red,green,blue,purple,orange);
	background-image:-webkit-gradient(radial,centercenter,0,centercenter,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);/*newsyntax*/
	background-image:radial-gradient(red,green,blue,purple,orange);}

大家实现一个更复杂的，加上位置信息和更多的颜色停止点：

#example6{
	background-image:-moz-radial-gradient(45px45px45deg,circlecover,yellow0%,orange100%,red95%);
	background-image:-webkit-radial-gradient(45px45px,circlecover,yellow,orange);
	background-image:radial-gradient(45px45px45deg,circlecover,yellow0%,orange100%,red95%);}

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

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

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

想让你的CSS颜色渐变(Gradients)表现一定的透明度？使用rgba颜色。
使用背景色垫底，这样防止当浏览器不支持时不注意没有任何颜色。

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

#example7{
	background-image:-moz-repeating-linear-gradient(topleft-45deg,green,red5px,white5px,#ccc10px);
	background-image:-webkit-repeating-linear-gradient(-45deg,green,red5px,white5px,#ccc10px);}

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

CSS颜色渐变底色

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

/*example1-basic*/#example1	{
	/*fallback*/
	background-color:#063053;
	/*gradientsbelow*/}

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