css3 背景渐变
摘要：在没有了解css也可以做背景渐变以前，我都是通过PS一张背景渐变的图片来应用到自己所做的网页中。然而，在前不久我了解到css3也可以做背景渐变后，想要做背景渐变的效果就很容易了许多，下面是一些css3做背景渐变的方法。一.线性渐变//自上而下的线性渐变div{width:400px;height:1...
在没有了解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做背景渐变时需要注意浏览器兼容性这一点。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢