我所说的颜色突变是指：两个颜色之间没有渐变，直接过渡，如下图所示：
在CSS中，颜色突变的效果的应用还是很广泛的，比如：条纹背景（参考《CSS中条纹效果的实现方案》）、网格背景、多边形图案等等；
在CSS中实现颜色突变的效果有多种方案，如下：
方案1：多个元素组合
这个方案的思路比较直观，就是每个颜色块用一个元素显示；由于过于简单，在此就不再讲解；
此方案优点：
- 原型直观，易理解；
- 可以实现任意多的颜色突变；
此方案缺点：
- 添加了较冗余的元素；
方案2：插入颜色渐变辅助色标
这个方案是通过CSS中的渐变实现；但由于在CSS渐变中不支持实色块的长度，即：只能线性地过渡2个相邻的色标。所以若要实现颜色的突变，还需要一个技巧，些技巧的原理步骤如下：
以background的线性渐变为例；
假设我们需要实现从颜色1到颜色2的突变，如下图：
具体的实现步骤如下：
-
定义从颜色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的突变，如下图：
具体的实现步骤如下：
-
定义从颜色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中特殊效果的实现方案》
