我所说的颜色突变是指：两个颜色之间没有渐变，直接过渡，如下图所示：

颜色突变示例.png

在CSS中，颜色突变的效果的应用还是很广泛的，比如：条纹背景（参考《CSS中条纹效果的实现方案》）、网格背景、多边形图案等等；

在CSS中实现颜色突变的效果有多种方案，如下：

方案1：多个元素组合

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

此方案优点：

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

此方案缺点：

1. 添加了较冗余的元素；

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

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

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

示例.png

具体的实现步骤如下：

1. 定义从颜色1到颜色2的渐变；
   示例代码：

   background-image: linear-gradient(to right, red 0%, blue 100%);
   

   示例效果：

   步骤1.png

2. 插入颜色1和颜色2的实色辅助色标；
   为了在渐变中实现实色（没有渐变的颜色）效果，我们需要在颜色1与颜色2之间再插入与颜色1具有相同颜色的色标1+ 和 与颜色2具有相同颜色的色标2+；如下图：
   示例效果：

   步骤2.png

   示例代码：

   background-image: linear-gradient(to right, red 0%,red 40%,blue 60%, blue 100%);
   

3. 把实色辅助色标放在同一位置；
   在步骤2中已经实现了实色块（色标1--色标1+ 和 色标2+—色标2），但是色标1+—色标2+之间的色区仍是渐变的效果，为了实现突变的效果，我们可以让渐变区域的长度变为零；如下：
   示例效果：

   步骤3.png

   示例代码：

   background-image: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
   

此方案的优点：

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

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

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

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

示例.png

具体的实现步骤如下：

1. 定义从颜色1到颜色2的渐变；
   示例代码：

   background-image: linear-gradient(to right, red 0%, blue 100%);
   

   示例效果：

   步骤1.png

2. 把色标1与色标2向突然位置靠拢；
   根据《CSS中渐变函数的特性》 （见附录），可知：对于非重复渐变：如果把色标1往后移，则色标1之前的区域会用色标1的颜色填充，形成色标1的实色区域；如果把色标2的位置往前移，则色标2之后的区域会用色标2的颜色填充，形成色标2的实色区域；如下：
   示例效果：

   步骤2-非重复.png

   示例代码：

   background-image: linear-gradient(to right, red 40%,blue 60%);
   

3. 把色标1和色标2放在同一位置；
   在步骤2中已经实现了实色块（色标1之前 和 色标2之后），但是色标1—色标2之间的色区仍是渐变的效果，为了实现突变的效果，我们可以让渐变区域的长度变为零；如下：
   示例效果：

   步骤3-非重复.png

   示例代码：

   background-image: linear-gradient(to right, red 50%, blue 50%);
   

此方案的优点：

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

此方案的缺点：

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

附录

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

CSS中渐变函数的特性

1. 每个渐变至少需要指定2个色标color-stop；
2. 对于任意2个相邻色标之间的颜色变化是：在前一个色标与后一个色标的位置之间，线性地把前一个色标的颜色过渡到后一个色标的颜色；
3. 对于多个没指定位置的色标，它们的位置分别是：前面最近的有位置的色标的位置 与 后面最近有位置的色标的位置 之间的平分点；
4. 如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；
5. 如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；
6. 对于非重复渐变，第1个色标位置之前的颜色是第1个色标的颜色；最后一个色标位置之后的颜色是最后一个色标的颜色；
7. 对于重复渐变，会用渐变区域分别平铺第1个色标之前的区域 和 最后1个色标之后的区域 ，直到填满为止；
8. 对于重复渐变，如果渐变渐变区域的长宽为零，则会用最后1个色标的颜色填充整个区域；
9. 如果前面色标设置的位置大于后面色标设置的位置，则后面色标设置的位置无效，所有比前端色标的位置小的色标，都将用 大于自身位置的前面的色标中位置最大的那个色标的位置 作为自身的位置；

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