原有的渐变效果我们都是通过图片做背景实现渐变,下面讲述一下css渐变效果的实现:
html代码:
<body> <div id="main"> <!-- 全局渐变 --> <div id="mode1"> </div> <!-- 较短细微渐变 --> <div id="mode2"> <div>此处显示为一个较短,细微的渐变</div> </div> <!-- 多种颜色 Color-Stops --> <div id="mode3"> </div> <!-- IE --> <div id="mode4"> <div>IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果(在IE浏览器下可见)</div> </div> </div>
mode1:显示全局的渐变,即将容器填满
#mode1 { background:-webkit-gradient(linear,0,0,0,100%,from(#ababab),to(#ffffff));/* Webkit */ background:-moz-linear-gradient(top,#ababab,#ffffff);/* Mozilla */ }
此为Webkit的格式:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
- 渐变的类型? (linear)
- 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
- 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
- 开始的颜色? (from(red))
- 结束的颜色? (to(blue))
此为Mozilla的格式:
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
- 请注意我们将渐变的类型——linear——放到了属性前缀中了
- 渐变从哪里开始? (top – 我们也可以使用度数,比如-45deg)
- 开始的颜色? (red)
- 结束的颜色? (blue)
mode2:较短细微简便的实现
#mode2 { background:-webkit-gradient(linear,0,0,0,10%,from(#ababab),to(#ffffff));/* Webkit */ background:-moz-linear-gradient(top,#ababab,#ffffff 10%);/* Mozilla */ }
mode3:多种颜色渐变
#mode3 { background:-webkit-gradient(linear,0,0,0,10%,from(#ababab),color-stop(8%,#ffffff),color-stop(10%,#6c6c6c));/* Webkit */ background:-moz-linear-gradient(top,#ababab,#ffffff 50%,#ababab);/* Mozilla */ }
- 对于-moz 版本,我们定义,从元素的50%的高度的地方开始是白色。
- 而对于-webkit,我们使用color-stop(x%,color),采用两个参数:哪里开始停止,使用哪种颜色。
mode4:IE浏览器实现渐变
#mode4 { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ababab', endColorstr='#fffff'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ababab', endColorstr='#ffffff')"; /* IE8 */ }
IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果
CSS3 gradient(背景颜色渐变)代码书写规范及示例 /* Webkit浏览器 */ background-image:-webkit-gradient( linear, /* 渐变类型:线性渐变 */ 10% 10%, /* 分别对应X,Y 方向渐变起始位置 */ 100% 100%, /* 分别对应X,Y 方向渐变终止位置 */ color-stop(0.14, rgb(255,0,0)), /* 渐变颜色位置,及颜色 */ color-stop(0.5, rgb(255,255,0)), /* 渐变颜色位置,及颜色 */ color-stop(1, rgb(0,0,255)) /* 渐变颜色位置,及颜色 */ ); /* Moz Firefox浏览器 */ background-image:-moz-linear-gradient( 10 10 90deg, /* 渐变起始位置及角度 */ rgb(255,0,0) 14%, /* 渐变颜色位置,及颜色 */ rgb(255,255,0) 50%, /* 渐变颜色位置,及颜色 */ rgb(0,0,255) 100% /* 渐变颜色位置,及颜色 */ );
如下为以上四种的效果图: