快来让你的网页色彩绚丽--linear-gradient与radial-gradient

作者:WangMin
格言:努力做好自己喜欢的每一件事

随着前端技术的发展，单一的背景色已经满足不了客户的需求了，所以在前端开发中我们常常会用到一些渐变色的效果，这样可以使前端页面更加美观。那么渐变色的效果到底是怎么来的？我们应该怎么做才能实现这一效果呢？接下来就一起来看看吧！

实现原理

css要实现渐变，就必须使用线性渐变函数 linear-gradient（） 与 径向渐变函数 radial-gradient 来设置 background 或 background-imge 属性。那么 它们都需要哪些参数呢？首先应该了解它的语法。

线性渐变函数 linear-gradient（） 的语法

linear-gradient(direction / angle, color stop [ <percentage> | <length> ], color stop [ <percentage> | <length> ], ...);

1、 direction [ 渐变的方向 ] / angle [ 渐变的角度 ]

direction [ 渐变的方向 ] 可分为：

1）、to top : 颜色从下往上渐变，如下案例 1 ：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to top,#f00,#67f)
}

网页效果如下：

2）、to bottom : 颜色从上往下渐变，如下案例 2：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to bottom,#f00,#67f)
}

网页效果如下：

3）、to left : 颜色从右往左渐变，如下案例 3：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to left,#f00,#67f)
}

网页效果如下：

4）、to right : 颜色从左往右渐变，如下案例 4：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to right,#f00,#67f)
}

网页效果如下：

5）、to bottom right : 颜色从左上角到右下角渐变，如下案例 5：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to bottom right,#f00,#67f)
}

网页效果如下：

6）、to bottom left : 颜色从右上角到左下角渐变，如下案例 6：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to bottom left,#f00,#67f)
}

网页效果如下：

7）、to top right : 颜色从左下角到右上角渐变，如下案例 7：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to top right,#f00,#67f)
}

网页效果如下：

8）、to top left : 颜色从右下角到左上角渐变，如下案例 8：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to top left,#f00,#67f)
}

网页效果如下：

angle [ 渐变的角度 ]可分为：

0deg :颜色从下往上渐变
180deg :颜色从上往下渐变
270deg:颜色从右往左渐变
90deg :颜色从左往右渐变
135deg :颜色从左上角度到右下角渐变
-135deg :颜色从右上角到左下角渐变
45deg :颜色从左下角到右下角渐变
-45deg :颜色从右下角到左上角渐变

这里列出的是几个常用到的角度，也可以根据自己的需求来设置角度。案例参照上面 direction 参数的案例，只需要把方向改为对应角度 angle 就可以了。

2、color stop [ 渐变的起止颜色 ]

color stop 可以是一个表示颜色的十六进制数，可以是一个表示颜色的单词，也可以是用rgb或者rgba来表示的颜色。 color stop 这个参数可以设置多个来表示多个颜色的渐变色，但是默认至少要设置两个 color stop 来表示渐变色的渐变色的开始颜色和渐变色的结束颜色，所以上面的语法中设置了两个 color stop 来表示两个颜色之间的渐变色。如下案例 9：

 <div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to top,pink,#67f)
}

网页效果如下：

如果只存在一个color stop ，也就是说只设置了一个颜色的话元素元素依旧存在但没有任何颜色，更别说实现渐变色的效果了。

另外在语法中，颜色值后面还可以添加百分比或者固定数值来表示某个颜色值距离起点的开始位置 。上面的案例中颜色后面都没有跟百分比或者数值，这里我给颜色添加百分比看看是什么效果，如下案例 10：

<div class="box box1"></div>
<div class="box box2"></div>
.box{
   width:300px;
   height:150px;
}
.box1{
    background:linear-gradient(to top,pink,#67f)
}
.box2{
    background:linear-gradient(to top,pink 0%,#67f 100%)
}

网页效果如下：

从以上案例中，我给元素box2的颜色设置了百分比（pink 0%,#67f 100%），没有给元素box1颜色设置百分比，可以看到其实显示出来的效果其实是一样的。所以如果不设置百分比的话，默认是根据颜色的个数来给每个颜色值设置的，最后一个颜色的百分比值就是100%，而起始的值就是0%。

如果给元素box2的颜色设置了百分比（pink 0%,#67f 100%）与不设置效果一样的话，那么重新给元素box2的粉色设置了20%，蓝色设置60%，来看看是什么效果？如下案例 11：

<div class="box"></div>
.box{
   width:300px;
   height:150px;
   background:linear-gradient(to top,pink 20%,#67f 60%)
}

网页效果如下：

有小伙伴可能会疑惑为什么是这种效果呢？那么就要来看看颜色后面百分比的含义了。百分比是指 某个颜色值距离起点的开始位置 。案例中的渐变方式为从下往上，所以当某个颜色值设置了百分比后，便会从距离底部相应的距离（百分比计算）开始填充实色。与上一个案例截图可以看出元素高度的0%-20% 的位置都是粉色的实体颜色，在元素高度的60%-100%以后都是蓝色的实体颜色，只有在20%—60%之间才是粉色与蓝色的渐变色。

从上面的案例中可以的出一个结论：如果第一个颜色值设置了百分比的话，那么0%-（设置的第一个颜色值的百分比) 的之间的距离就是第一个颜色的实体颜色，第二个颜色值设置了百分比的话，就是从设置的第二个颜色值的百分比开始渲染第二个颜色的实色。那么两个颜色的渐变色的区域就是 第一个颜色值的百分比到第二个颜色值的百分比的区域 ，也就是说 渐变过渡区的百分比为第二个颜色值的百分比减去第一个颜色值的百分比之后剩下的空间。所以说在设置第二个颜色值的百分比时一定要比第一个颜色值的百分比要大，并且两个颜色的百分比不能设置一样，不然的话会出现以下两种情况：

第二个颜色值的百分比比第一个颜色值的百分比小的情况下，如下案例 12：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:linear-gradient(to top,pink 20%,#67f 10%)
}

网页效果如下：

从上面可以看到0%-20%之间为粉色，给蓝色设置的百分比并没有生效，而是将元素剩余的部分全部渲染为了蓝色，因此我们可以得到一个结论：第二个颜色值的百分比时一定要比第一个颜色值的百分比小的情况下，浏览器会忽略第二个颜色值的百分比，将剩余部分的百分比全部给了第二个颜色值，并且它们之间不存在渐变色。 从例子中可以看出蓝色是从元素高度的20%开始渲染到元素高度的100%，因为蓝色是紧接着粉色开始渲染的，所以它们之间不存在两色之间的渐变色。

第一个颜色值的百分比和第二个颜色值的百分比相等的情况下，如下案例 13：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:linear-gradient(to top,pink 50%,#67f 50%)
}

网页效果如下：

上面的例子中给第一个颜色值的百分比和第二个颜色值的百分比都设置的50%，所以它们各占元素高度的一半，因为渐变色的区域为第二个颜色值的百分比-第一个颜色值的百分比，这里50%-50%=0，因此它们不存在渐变色。

上面讲到了可以给颜色设置百分比，也可以给颜色设置数值。其实设置颜色值与设置数值是一个道理，也要按照上面给颜色设置百分比的规则来设置，效果是一样的。就将案例 11中样式的百分比设置为相应的数值，如下案例14：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:linear-gradient(to top,pink 30px,#67f 90px)
}

网页效果如下：

从上图可以看到给颜色设置数值的案例14与给颜色设置百分比的案例11效果一样。当然无论是给颜色设置百分比还是数值都可以根据自己需求来设置。

3、存在多个 color stop 颜色值

上面提到了 color stop 可以设置多个来表示多个颜色之间的渐变色，但是 颜色 至少 要设置两个来表示它们的起止颜色，那么如果存在多个颜色值时，效果又是怎样的呢？如下案例15：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:linear-gradient(to top,pink,#67f,#f00,#000)
}

网页效果如下：

我在案例 9的基础上有新添加红色和黑色两种颜色，呈现出来的效果如上图所示，那么它们之间各自的着色区域是怎么分配的呢？从图中可以看出，在没有个颜色设置百分比的情况下，似乎它们之间距离差不多，所以我们可以根据公式100/（颜色个数-1）将各自的着色区域求出来。这里以上述案例为例用上述公式将各自的着色区域算出来大约为33.3%，每个颜色的着色区域在上个颜色的基础上加上33.3%，就可以得到每个颜色的着色点。根据这个百分比我们可以将上述案例写为如下形式：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:linear-gradient(to top,pink 0%,#67f 33.3%,#f00 66.6%,#000 100%);
}

将如上代码运行一下，你会发现呈现出的效果跟案例15的效果一样。

根据上面全部所说的，我们就可以通过一个属性做出一个多重颜色线条的背景，如下案例16：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:linear-gradient(to top,pink 0%,pink 25%,#67f 0%,#67f 50%,#f00 0%,#f00 75%,#000 0%,#000 100%)
}

网页效果如下：

这里设置了4个颜色，因为设置的方向是从下往上渐变，所以最先开始着色的是粉色，这个时候整个元素已经被粉色覆盖，在这里给每个颜色设置着色点的原因是每个颜色需要一个起始着色点都设置为0%，也就是说每个颜色都从元素的（高度或者宽度）的0%开始着色，将相互两个颜色之间的渐变色过渡区域覆盖为后一个颜色的实色，清除过度效果。这样就得到了案例16的效果了。

重复线性渐变：repeating-linear-gradient语法

repeating-linear-gradient(direction / angle, color stop [ <percentage> | <length> ], color stop [ <percentage> | <length> ], ...);

如下案例17：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:repeating-linear-gradient(to top,pink 10%,#67f 20%)
}

网页效果如下：

径向渐变函数 radial-gradient（） 的语法

linear-gradient(position, color stop [ <percentage> | <length> ], color stop [ <percentage> | <length> ], ...);

1、 position [ 渐变的位置 ]

position [ 渐变的位置 ] 可分为：
1）、circle 表示圆形渐变，以元素的中心为圆心向四周进行圆形渐变。如下案例18：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:radial-gradient(circle,pink,#67f)
}

网页效果如下：

2）、ellipse 表示把渐变拉伸成椭圆形，以元素的中心为圆心向四周进行椭圆形渐变，如下案例19：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:radial-gradient(ellipse,pink,#67f)
}

网页效果如下：

3）利用第一个参数设置渐变的中心位置

上面提到的两种渐变方式都可以设置渐变的中心位置，第一个参数就要在两种渐变方式后面利用关键字 at 来确定渐变中心点的位置，at 后面需要设置两个数字（百分比或者数字都可以），第一个数字表示的是渐变中心点离元素左边缘的距离，第二个数字表示的是渐变中心点离元素上边缘的距离。如下案例20：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:radial-gradient(ellipse at 60% 40%,pink,#67f)
}

网页效果如下：

2）、color stop [ 渐变的起止颜色 ] 与 线性渐变函数 linear-gradient（） 的color stop 是一样的规则。可以给颜色设置百分比与数值，也可以设置多个颜色的径向渐变。

颜色带有百分比的径向渐变，如下案例21：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:radial-gradient(circle,pink 10%,#67f 60%)
}

网页效果如下：

多个颜色的径向渐变，如下案例22：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:radial-gradient(circle,pink,#67f,#f00,#000)
}

网页效果如下：

重复径向渐变：repeating-radial-gradient()语法

repeating-radial-gradient(position, color stop [ <percentage> | <length> ], color stop [ <percentage> | <length> ], ...);

设置渐变蓝色在10%的位置就结束。然后渐变循环，又以粉色开始。如下案例23：

<div class="box"></div>
.box{
    width:300px;
    height:150px;
    background:repeating-radial-gradient(circle,pink 10%,#67f 20%)
}

网页效果如下：

以上函数的兼容性

为了兼容各主流浏览器并支持它们的较低版本，在基于Webkit的Chrome和Safari等浏览器 上使用以上函数时，需要在函数的名称前加上 -webkit-；Firefox浏览器 则需要在属性的名称前加上 -moz-；opera浏览器 则需要在属性的名称前加上 -o-；IE浏览器 则需要在属性的名称前加上 -ms- 。上述所有案例中我为了方便，没有将几种兼容格式都写上，但是在实际开发中一定要写上几种兼容格式，避免在其他浏览器中无法显示出该效果。

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! :smile: 后续继续更新!!