css3背景要炫！渐变有道！ - Forum

Page 1 of 1
1

css3背景要炫！渐变有道！ (css3 gradient)

css3背景要炫！渐变有道！

Seven

Date Fr, 2013-06-14, 18:12 | Msg 1

渐变一直都是蛮复杂的东东，长长的看不懂

首先先写下IE678支持的渐变滤镜

Code

/* IE6789*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00A3EF', GradientType='0');

由左向右依次是起始颜色，结束颜色，渐变类型，这个滤镜只能用两种颜色，而且渐变类型只有线性渐变一种，而且只有水平（1）和垂直（0）两种方向

顺便给个网页去色的滤镜：

Code

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

好了，真正的渐变，这里分成线性渐变和径向渐变来写

线性渐变——

Code

/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);

这样理解，linear是渐变类型，top left是方向起始点坐标0 0/0% 0%（IE10可以用角度45deg），起始色/位置，结束色/位置（如果有多色可以在中间加颜色/位置）

这里再补充一个webkit的新写法——

Code

background: -webkit-linear-gradient(left top, #FFFFFF 0%, #00A3EF 100%);

径向渐变——

Code

/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #1CBF8D 50%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #1CBF8D 50%, #00A3EF 100%);

/* Opera */
background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #1CBF8D 50%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(0.5, #1CBF8D), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #1CBF8D 50%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #1CBF8D 50%, #00A3EF 100%);

径向渐变有两种，圆（circle），椭圆（elliptical）

径向渐变比线性多一个渐变大小的属性控制，值可以有closest-side, closest-corner, farthest-corner, farthest-side，其他和线性差不多

注：上面的0%、100%是颜色渲染到的位置，一般的双色0~100%渐变可以不写，如果不写到100%，比如写成0~10%，则可以实现重复渐变10次

css3背景要炫！渐变有道！ (css3 gradient)

Page 1 of 1
1