在没有了解css也可以做背景渐变以前，我都是通过ps一张背景渐变的图片来应用到自己所做的网页中。然而，在前不久我了解到css3也可以做背景渐变后，想要做背景渐变的效果就很容易了许多，下面是一些css3做背景渐变的方法。
一.线性渐变
//自上而下的线性渐变
p{
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*/
}
//从左往右的线性渐变
p{
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()函数的线性渐变
p{
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。
三.径向渐变（从圆心到圆外）
p{
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做背景渐变时需要注意浏览器兼容性这一点。
以上就是使用css3实现背景渐变方法的详细内容。