我们一般实现背景渐变的方法都是用图片来实现,这段时间在做项目中找到了一种用css3用颜色实现背景渐变的方法,主要支持Firefox和Safari/Chrome 等浏览器,ie用滤镜的方法来解决渐变的问题:
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变),
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )参数:第一个参数表示方向,可以是top,表示从上到下,left表示从左到右,left top 从左上角到右下角;第二个参数和第三个参数分别表示起点颜色和终点颜色,在里面也可以插入更多的参数颜色
可以写成background:-moz-lineat-gradient(top,#ccc,#000);
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则参数:第一种的书写方法里的参数跟-moz-linear-gradinent的参数是一样的;
第二种参数里的type表示的是渐变的类型,可以是linear渐变或者radia径向渐变;第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);
参数:第一参数表示渐变的方向,第二个参数和第三个参数分别表示渐变颜色的起点和终点;
在ie中解决渐变的方法主要是利用滤镜:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/参数:IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。