CSS3线性渐变

Posted 2021-04-09 前端微站

今天来谈谈CSS3中的线性渐变，有了这个，好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。

首先看看今天的主角： linear-gradient()。

它，实际上不是颜色，而是背景图片。也就是说，它并不是color的属性值，而是background的属性值。

我们接下来看看linear-gradient()的具体用法。

语法：

<linear-gradient> = linear-gradient([ [<angle> | to <side-or-corner> ] ,]? <color-stop>[，<color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color>[<length>|<percentage>]?

<angle>: 用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>： 指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。

以上语法部分使用的是正则表达式的语法规则，可能并不是很好理解。

没关系，学习都是需要循序渐进的，我们从最简单的开始……

1. 传入两个或多个颜色参数

这个很好理解，要做渐变，当然得设置颜色值，换句话说，你得让浏览器知道你想要实现从哪个颜色到哪个颜色之间的渐变。例如，你要实现从红色到黄色之间的渐变，你可以这样写：

background: linear-gradient(#f00,#ff0);

默认是从上往下渐变的，效果如下：

图一

如果你还想要加入更多的颜色，继续往后面添加颜色参数即可，例如：

background: linear-gradient(#f00,#ff0,#0f0);

效果是根据参数顺序依次往下渐变：

图二

2. 传入渐变方向参数

有时候我们不只是想要从上而下固定方向上的颜色渐变，可能想要实现的是各个方向上的渐变，那么此时我们可以在 1 中传入多个颜色值的基础上再传入渐变方向，该参数作为第一个参数，可以是八种方向，也可以是具体的角度值。

我们来看具体实例：

background: linear-gradient(to right,#f00,#ff0);

根据第一个参数语义就可以知道，这里实现的是从左往右方向上的由红到黄的渐变，效果如下所示：

图三

如果想要实现从左下角往右上角的渐变，那么第一个参数可以写成to right top或者直接写具体角度值45deg，上面例子就可以这样写：

background: linear-gradient(to right top,#f00,#ff0);

或者：

background: linear-gradient(45deg,#f00,#ff0);

效果如下所示：

图四

需要注意的是，角度值若为0deg表示的是从下到上的渐变（方向表示为to top），所以45deg则表示顺时针旋转45度。

3. 传入渐变颜色起止位置参数

默认情况下的起止位置是从0%到100%，也就是说 1 中例子实际上还可以写成下面这样（效果如图一）：

background: linear-gradient(#f00 0%,#ff0 100%);

注意位置参数须紧跟在颜色值之后，中间用空格隔开。

若是三种颜色就是这样的（效果如图二）：

background: linear-gradient(#f00 0%,#ff0 50%,#0f0 100%);

当然，我们还可以写成具体数值，如果元素高度为150px，那么就可以写成这样：

background: linear-gradient(#f00 0,#ff0 75px,#0f0 150px);

另外，渐变颜色起止位置参数还有一个很重要的用法，就是可以在同一个元素中写出多种不同层次颜色效果。

我们来看一个具体实例：

background: linear-gradient(#f00 0%,#f00 50%,#ff0 50%,#ff0 100%);

显示效果如下图：

图五

再比如：

background: linear-gradient(45deg,#f00 0%,#f00 33.33%,#ff0 33.33%,#ff0 66.66%,#0f0 66.66%,#0f0 100%);

图六

表面上看代码挺吓人的，实际上只要理解了前面内容的话也是很好理解的。

为了让大家都能更好的理解，我们来一步步分解这些参数吧~~

① 45deg（渐变方向）

这个很好理解，45deg则代表的是从元素左下角到右上角的渐变，可以用to right top替代之。

② #f00 0%,#f00 33.33%（红色色块）

由红色渐变到红色，当然就是纯红色咯~

0%和33.33%则代表的是相应颜色所在的位置。

③ #ff0 33.33%,#ff0 66.66%（黄色色块）

原理同上。

④ #0f0 66.66%,#0f0 100%（绿色色块）

原理同上。

这样一分解，是不是看起来清晰多了呢？

4. 重复渐变

有时候我们可能需要制作斑马条纹状的图案效果，类似下图这样：

图七

这样的效果我们完全可以利用 3 中的方式一点点去写，但是显然重复工作量比较大。

对于这样有规律的图案，我们可以使用repeating-linear-gradient()来实现，用法与linear-gradient()完全相同。图七效果可以这样来写：

background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

也就是说，我们只需要写出其中一部分图案，其他部分将会被自动平铺。

另外，由于linear-gradient()本身也是背景图片，所以以上效果我们还可以使用背景图片平铺方式来实现：

background: linear-gradient(#f00 0,#f00 50%,#ff0 50%,#ff0 100%); background-size: 100% 20%;

需要注意的是此时需要使用background-size来设置渐变图案的大小。

结束语： 好了，有关CSS3中的线性渐变今天就讲到这里，如有疑问，欢迎大家评论留言哦~~