css背景颜色渐变效果

时间：2024-02-20 21:39:12

css3兼容性的渐变效果：

http://www.zhangxinxu.com/wordpress/2010/04/css%E5%AE%9E%E7%8E%B0%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AFgradient%E6%95%88%E6%9E%9C/

firefox3.6下的渐变效果：

http://www.zhangxinxu.com/wordpress/?p=727

chrome下的渐变效果：

http://www.qianduan.net/understand-the-css3-gradient.html

一、IE浏览器下的渐变背景：IE渐变滤镜

渐变：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
gradientType=1代表横向渐变
gradientType=0代表纵向淅变
startcolorstr=”色彩” 代表渐变渐变起始的色彩
endcolorstr=”色彩” 代表渐变结尾的色彩。

透明渐变：
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。0代表完全透明，100代表完全不透明。 
finishopacity设置渐变的透明效果，指定结束时的透明度。范围也是0 到 100
style用来指定透明区域的形状特征
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。 
finishx 渐变透明效果结束处的 X坐标。 
finishy 渐变透明效果结束处的 Y坐标。

二、Firefox浏览器下的渐变背景

线性的(-moz-linear-gradient)：
background: -moz-linear-gradient(left, blue, white);
起始点(Starting Point)：起点的工作方式类似于background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。
角度(Angle)：是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。
background: -moz-linear-gradient(left 20deg, black, white);
起止颜色(Color Stops)：除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。
background: -moz-linear-gradient(top, blue, white 80%, orange);

放射状的(-moz-radial-gradient)：
(Repeating Gradients)：


三、Chrome浏览器下的渐变背景


-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
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))
    • 






		

		
	

	
	









    
    

    
    

    

    

    

    

            

    

    

    

    

    




相关文章