您的位置：首页 > Web前端 > CSS

css渐变效果的实现

2012-06-06 14:58 162 查看

原有的渐变效果我们都是通过图片做背景实现渐变，下面讲述一下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%  /* 渐变颜色位置，及颜色 */
);

如下为以上四种的效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css mozilla webkit 浏览器 div ie

相关文章推荐

新的分享

章节导航