css3渐变（Gradient）

发表于 | 分类于 |

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

渐变分为：线性渐变（Linear Gradient）和径向渐变（Radial Gradient）,线性渐变通过控制角度或者方向（向下/向上/向左/向右/对角方向）实现变换，径向渐变由中心定义。

现在主流浏览器有Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera(presto)（Opera浏览器）、Trident(IE)。css Gradient在IE下也可以实现，但需要通过IE特有的滤镜来实现。

线性渐变

实例讲解gradient做的盒子边框

盒子渐变
在这个例子中，我们只看到了盒子边框有渐变效果，那么这是怎么做的呢？实际就是一个小盒子，一个大盒子，小盒子是中间那个空白区域，大盒子是包括边框和内如空白区域的部分。然后通过设置小盒子的z-index大于大盒子的z-index，使大盒子中间部分被小盒子的白色遮盖，这么看来，也就得到了边框渐变。代码如下：

1
2
3
<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>

css如下,注意大盒子的宽和高都比小盒子大20px，是通过定位使两个小盒子在大盒子的中间。：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.box {
  margin: 80px 30px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #fff;
  float: left;
}
.box:before {
      content: '';
      z-index: -1;
      position: absolute;
      width: 220px;
      height: 220px;
      top: -10px;
      left: -10px;
}

.first:before {
  background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
  background-image: linear-gradient(0deg, orange, red);
}
.third:before {
        background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}

Gradient在webkit和mozila浏览器中语法介绍

线性渐变在Mozila下的应用

1
background: -moz-linear-gradient( top,#ccc,#000);

共三个参数：第一个参数表示渐变的方向，如top是从上到下，left是从左到右，left top从左上到右下。第二个和第三个参数分别是起点颜色和终点颜色，你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：
mozila

线性渐变在Webkit下的应用

-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

1
background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

旧方法

1
-webkit-linear-gradient(top,#ccc,#000);

新方法

还有几种浏览器是opera和trident就不介绍了,仿照下面写，详细可以看w3cplus详细的介绍

1
2
3
4
5
6
7
8
9
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ace, #f96); 
/* Safari 4-5, Chrome 1-9 */ 
/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
background: -webkit-gradient(linear,top,from(#ace),to(#f96));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ace, #f96);

结果如下

其中的方向当然也可以是角度：当指定的角度，请记住，‘0deg’指向上面，同时正角度顺时针旋转，因此‘90deg’指向右边。
角度理解from 张鑫旭
（代码举例）当设置为30deg时：

1
2
3
4
5
6
7
8
#grad5 {
    height: 100px;
    width:20%;
    background: -webkit-linear-gradient(30deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(30deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(30deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(30deg, red, blue); /* 标准的语法（必须放在最后） */
}

角度变化

径向渐变

实例1：

1
2
background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

均匀渐变
实例2：

1
2
background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

非均匀渐变
从以上俩个示例的代码中发现，他们起止色想同，但就是示例二定位了些数据，为什么会造成这么大的区别呢？其实在径向渐变中虽然具有相同的起止色，但是在没有设置位置时，其默认颜色为均匀间隔，这一点和我们前面的线性渐变是一样的，但是设置了渐变位置就会按照渐变位置去渐变，这就是我们示例一和示例的区别之处：虽然圆具有相同的起止颜色，但在示例一为默认的颜色间隔均匀的渐变，而示例二每种颜色都有特定的位置。
实例3：

1
2
background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

中心不同
这里设置中心位置不同，并且形状似圆形，若是设置为椭圆（ellipse），会有不一样的效果。

如果您想重复一个渐变，您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。 在下面的例子，每个实例都指定了两个起止颜色，并无限重复。

1
2
3
4
background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

效果如下：
radial
linear

推荐&&感谢w3cplus文章