方案1：多个元素组合

这个方案的思路比较直观，就是每个颜色块用一个元素显示；由于过于简单，在此就不再讲解；

此方案优点：

原型直观，易理解；
可以实现任意多的颜色突变；

此方案缺点：

添加了较冗余的元素；

方案2：插入颜色渐变辅助色标

这个方案是通过CSS中的渐变实现；但由于在CSS渐变中不支持实色块的长度，即：只能线性地过渡2个相邻的色标。所以若要实现颜色的突变，还需要一个技巧，些技巧的原理步骤如下：

以background的线性渐变为例；
假设我们需要实现从颜色1到颜色2的突变，如下图：

示例.png

具体的实现步骤如下：

定义从颜色1到颜色2的渐变；
示例代码：
```
background-image: linear-gradient(to right, red 0%, blue 100%);
```
示例效果：
步骤1.png

插入颜色1和颜色2的实色辅助色标；
为了在渐变中实现实色（没有渐变的颜色）效果，我们需要在颜色1与颜色2之间再插入与颜色1具有相同颜色的色标1+ 和与颜色2具有相同颜色的色标2+；如下图：
示例效果：
步骤2.png
示例代码：
```
background-image: linear-gradient(to right, red 0%,red 40%,blue 60%, blue 100%);
```
把实色辅助色标放在同一位置；
在步骤2中已经实现了实色块（色标1--色标1+ 和色标2+—色标2），但是色标1+—色标2+之间的色区仍是渐变的效果，为了实现突变的效果，我们可以让渐变区域的长度变为零；如下：
示例效果：
步骤3.png
示例代码：
```
background-image: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
```

此方案的优点：

用单个元素实现，不用添加冗余元素；
可以实现任意多颜色的突变；

方案3：非重复的2色渐变

方案2可以实现任意多颜色的突变，如果只有2种颜色的突变，则使用非重复的渐变实现起来会更方便；原理步骤如下：

以background的线性渐变为例；
假设我们需要实现从颜色1到颜色2的突变，如下图：

示例.png

具体的实现步骤如下：

定义从颜色1到颜色2的渐变；
示例代码：
```
background-image: linear-gradient(to right, red 0%, blue 100%);
```
示例效果：
步骤1.png
把色标1与色标2向突然位置靠拢；
根据《CSS中渐变函数的特性》（见附录），可知：对于非重复渐变：如果把色标1往后移，则色标1之前的区域会用色标1的颜色填充，形成色标1的实色区域；如果把色标2的位置往前移，则色标2之后的区域会用色标2的颜色填充，形成色标2的实色区域；如下：
示例效果：
步骤2-非重复.png
示例代码：
```
background-image: linear-gradient(to right, red 40%,blue 60%);
```
把色标1和色标2放在同一位置；
在步骤2中已经实现了实色块（色标1之前和色标2之后），但是色标1—色标2之间的色区仍是渐变的效果，为了实现突变的效果，我们可以让渐变区域的长度变为零；如下：
示例效果：
步骤3-非重复.png
示例代码：
```
background-image: linear-gradient(to right, red 50%, blue 50%);
```

此方案的优点：

用单个元素实现，不用添加冗余元素；
不用添加辅助色标；

此方案的缺点：

只能用非重复渐变实现；
只能实现2个颜色的突变；

附录

由于本文会用到渐变的知识，所以，为了帮助大家理解，就把我总结的关于渐变的特性贴出来（原文：《HTML和CSS的发现与理解》 /CSS中渐变函数的特性），如下：

CSS中渐变函数的特性

每个渐变至少需要指定2个色标color-stop；

对于任意2个相邻色标之间的颜色变化是：在前一个色标与后一个色标的位置之间，线性地把前一个色标的颜色过渡到后一个色标的颜色；

对于多个没指定位置的色标，它们的位置分别是：前面最近的有位置的色标的位置与后面最近有位置的色标的位置之间的平分点；

如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；

如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；

对于非重复渐变，第1个色标位置之前的颜色是第1个色标的颜色；最后一个色标位置之后的颜色是最后一个色标的颜色；

对于重复渐变，会用渐变区域分别平铺第1个色标之前的区域和最后1个色标之后的区域，直到填满为止；

对于重复渐变，如果渐变渐变区域的长宽为零，则会用最后1个色标的颜色填充整个区域；

如果前面色标设置的位置大于后面色标设置的位置，则后面色标设置的位置无效，所有比前端色标的位置小的色标，都将用大于自身位置的前面的色标中位置最大的那个色标的位置作为自身的位置；

相关文章:《 CSS中特殊效果的实现方案》