CSS3 中 linear-gradient 的百分比含义

老牛浏览 655评论 0发表于 5 年前

1. 前言

最近开发项目遇到一个需求，已经求得商品的毛利率，需要根据毛利率的波动特性，用颜色很直观的描述其范围。简单来说，和股票一样，涨高时用一种颜色，降低时用一种颜色。如果毛利率为负，需要用另一种不同的颜色来表示。要注意的是，某种情况下，可能叠加了多个状态，要用多种颜色来表示。很自然，选择用背景色来表示，也就是 CSS3 的 linear-gradient 函数。当同时处于多个状态时，设置多个背景色即可。

2. 简介

linear-gradient() 函数用于创建一个线性渐变的「图像」。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让 Gecko 去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

3. 百分比的含义

3.1 例一

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red, yellow);
}

从红色渐变到黄色：

3.2 例二

接下来我们在后面添加百分比：

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 20%, yellow 80%);
}

效果如下：

可以看到渐变的区域向中间靠拢了，最上面是红色，最底下是黄色，中间部分才开始渐变。红色占了整个高度的 20%，黄色占了整个高度的 20%，剩下的 60% 是渐变区域。很奇怪，我们并没有直接设置 60%，但出现了这个值。

默认的渐变方式为从上到下，当某个颜色设置了百分比后，便会从离起始位置指定百分比距离的位置开始填充实色。

3.3 例三

接着我们再看一个例子：

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 0%, yellow 100%);
}

和例一并没有区别。

所以，我们不设百分比的话，默认是根据颜色的数量来设置百分比的，起始的值是 0%，最后一个颜色的值是 100%。

3.4 例四

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red, black, yellow, green, blue);
}

如果有更多的颜色，则平均划分，例如有 5 个，则有 4 个渐变区域，每种颜色的百分比依次为 0%，25%，50%，75%，100%，即（N - 1）* 100%。

简单来说，相邻两个百分比之间的差值就是渐变区域。

3.5 例五

所以线条背景色就好办了：

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 50%, yellow 50%);
}

或者

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 0%, red 50%, yellow 50%, yellow 100%);
}

3.6 例六

多线条的：

#grad1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 0%, red 25%, yellow 25%, yellow 50%, green 50%, green 75%, blue 75%, blue 100%);
}