南宁大型网站开发网站开发公司 logo

有两种新的图像类型完全由CSS实现:线性渐变和径向渐变。这两种渐变又各分为二;循环渐变和不循环渐变。渐变最常在背景中使用。不过，本篇只讨论线性渐变。

---

 渐变指从一个颜色到另一个颜色的平滑过渡。例如，白色到黑色的渐变从白色开始，经过一系列不同深度的灰色之后，最终变为黑色。渐变的平缓或骤变程度取决于渐变的作用空间。如果在100像素的长度内由白色变为黑色，渐变累进的过程中每次变暗1%。（此话摘自《css权威指南》），如下图所示：

body {background-image: -webkit-linear-gradient(left,white,black);}

（1）一些简单的线性渐变

效果如下图所示

 

 第一个可能是最简单的渐变了，只有两个颜色。这里，渐变从背景定位区域的顶部由第一个颜色变到背景定位区域底部的第二个颜色。这个渐变之所以是从上到下的，是因为渐变的默认方向是top，如果想使用其他方向，可以在声明渐变时先提供一个方向。

（2）渐变颜色

渐变中的颜色值可以使用任何类型，包括带 alpha 通道的值（例如rgba() 和transparent等关键字）。因此，完全可以从不透明度为零的颜色开始(或到不透明度为零的颜色终止)，实现部分淡出的渐变效果。

如下图所示：

 可以看到，第一个盒子从灰色变成了浅灰色，第二个由黄色逐渐变为透明。

当然，渐变的颜色不限于两个，只要你想，想用多少个颜色就用多少个，如下图所示：

 第一个渐变有6种颜色，两两之间以逗号分隔，而且用的都是颜色的名称，第二个由不透明到透明，各颜色分布均匀。

（3）定位

在每个颜色值之后可以（但不强求）提供一个位置值。这样可以把常规情况下均匀累进的色标变换成其他方式。
如下图所示：

颜色后面加距离的意思是：到这个距离时，该更换下一个颜色了，例如，30px-100px之间是黄色，100px-150px为粉色，依次类推。

但我要是最后位置放在300px那里，但是盒子只有200px，就会出现裁剪，只能到200px那里，剩下的都被裁剪了。在超出范围之前，只能显示这么多渐变。

如下图所示： 

 色标位置的长度值不限于px，任何长度值都可以，em、cm和英寸等都能用。此外，在同一个渐变中甚至可以混用不同的单位，但是一般不推荐这么做，如果愿意，还可以使用负的长度值，不过那样就会出现裁剪的情况，0px之前的颜色会被剪掉，此处就不做例子了哈。

既然我们能每隔几十px放一个颜色，那我们同样也能用百分数值放置颜色，位于50%处的颜色在盒子的中点，以下图为例：

 “急变”效果实现条纹：

 （4）斜线渐变

 如果想让渐变从左上到右下，可以添加一个left top，反过来也可以。

由于现在浏览器多渐变支持并不好，所以大多数情况下需要加浏览器私有前缀，此处我用的是edge，所以需要加-webkit-这个前缀，当然，以上所有情况不考虑IE浏览器 

（好了，以上就是所有内容了，如果有错，请务必指正，如果觉着写的可以的话，能不能给个三连）