css渐变
2011-07-19 16:59 呦菜 阅读(1282) 评论(0) 编辑 收藏 举报原有的渐变效果我们都是通过图片做背景实现渐变,下面讲述一下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% /* 渐变颜色位置,及颜色 */
);
如下为以上四种的效果图: