css3 背景渐变_html/css_WEB-ITnose

在没有了解css也可以做背景渐变以前，我都是通过PS一张背景渐变的图片来应用到自己所做的网页中。然而，在前不久我了解到css3也可以做背景渐变后，想要做背景渐变的效果就很容易了许多，下面是一些css3做背景渐变的方法。

 

一.线性渐变

//自上而下的线性渐变div{width:400px;height:100px;padding:5px;border:1px solid #ccc;background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/background:-moz-linear-gradient(top, blue, red);/* Firefox*/background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/}

//从左往右的线性渐变div{width:400px;height:100px;padding:5px;border:1px solid #ccc;background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/background:-moz-linear-gradient(left, blue, red);/* Firefox*/background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/}

第一个参数是渐变开始的方向，后面不需跟渐变结束方向；渐变的方向看可以是自上而下，也可以是从左往右；

第二个参数是渐变开始的颜色；

第三个参数是渐变结束的颜色。

 

二.加入stop()函数的线性渐变

div{width:400px;height:100px;padding:5px;border:1px solid #ccc;background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Safari, Chrome*/background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,#1a82f7 85%, red);/* Firefox*/background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,#1a82f7 85%, red);/* Opera, Opera mobile*/}

 上面代码的意思是：从左15%处，到50%处，再到85%处，最后到右边，颜色渐变的顺序为blue到#1a82f7， #2F2727, #1a82f7再到red。

 

三.径向渐变（从圆心到圆外）

div{width:200px;height:200px;padding:5px;border:1px solid #ccc;background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/background:-moz-radial-gradient(circle, blue, red);/* Firefox*/}

上面代码的意思是：一个颜色从blue到red的，从圆心向外围扩散的径向渐变。

如果参数circle换为ellipse，则为椭圆形的径向渐变。

 

四.正对IE浏览器的背景渐变

IE浏览器实现渐变只能使用IE自己的滤镜来实现。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色；

第二个参数：渐变终止位置的颜色；

第三个参数：渐变的类型，0代表竖向渐变，1代表横向渐变。

注意：IE浏览器的背景渐变设置不需要给background设置，直接使用filter即可。

 

虽然css3的背景渐变功能强大，但也存在浏览器兼容性问题。目前css3背景渐变属性的具体支持情况为：IE10，FireFox3.6+，Safari4.0+，Chrome，Opera11.1（暂不支持径向渐变）+，IOS 3.2+，Opera Mobile11.1，Android。因此我们在运用css3做背景渐变时需要注意浏览器兼容性这一点。