代码改变世界

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%  /* 渐变颜色位置，及颜色 */
);

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