你的位置:首页 > 网页设计

[网页设计]css3 背景渐变


在没有了解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做背景渐变时需要注意浏览器兼容性这一点。