• Page 1 of 1
  • 1
Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » css3背景要炫!渐变有道! (css3 gradient)
css3背景要炫!渐变有道!
渐变一直都是蛮复杂的东东,长长的看不懂

首先先写下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次
Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » css3背景要炫!渐变有道! (css3 gradient)
  • Page 1 of 1
  • 1
Search: