环形效果如下所示：

环形.png

环形效果的特点就是：多个颜色条交替排列，相邻颜色条之间的过渡是突变的效果；
所以，可以用颜色突变的方案来实现环形效果；

根据我的《CSS中颜色突变的实现方案》，有如下方案可实现环形效果（以圆环为例）：

备注：
如果没有看过我的《CSS中颜色突变的实现方案》，建议先看下，然后再来看这篇文章；

方案1：多个元素层叠

这个方案的思路比较直观，就是用多个单色填充的元素以相同的中心位置层叠，元素可以通过border-radius实现圆形效果，越小的圆形越靠上，如下图：

3d层叠效果

此方案优点：

1. 原型直观，易理解；
2. 可以实现任意多颜色的环形效果；
3. 能实现圆环、椭环、方环、扇形环等等，一切圆角可实现的形状的环类效果；

此方案缺点：

1. 添加了较多冗余的元素；
2. 需要根据圆环计算条个元素的尺寸；

方案2：径向渐变

这个方案是通过 《CSS中颜色突变的实现方案》/方案2-插入颜色渐变辅助色标 实现环形效果的，由于环形往往是交替重复出现的，所以最好用重复径向渐变函数repeating-radial-gradient() 来实现；

以实现红、绿、蓝3个颜色的水平环形效果为例：
示例代码：

background-image: repeating-radial-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);

示例效果：

径向重复渐变

此方案的优点：

1. 用单个元素实现，不用添加冗余元素；
2. 可以实现任意多颜色的交替重复的环形；
3. 能实现圆环、椭环以及多种图形层叠出的圆形；

此方案缺点：

1. 实现方环时较麻烦；

方案3：多重阴影

些种方案是利用CSS的阴影box-shadow来实现的；在CSS中，阴影box-shadow可以是外延或延的，并且可以指定多组阴影值，这就给实现环形带来了可能；可能部分人对阴影box-shadow的了解还不解深入和全面，在讲具体实现原理之前，先来了解下阴影box-shadow属性，如下：

box-shadow属性：

语法：

box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默认值：none
适用于：所有元素
继承性：无
动画性：是，除了内、外阴影切换时
计算值：指定值

取值：

none：
无阴影
<length>①：
第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：
如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>：
设置对象的阴影的颜色。
inset：
设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

从box-shadow属性语法上可以看出：

1. box-shadow可以设置多个阴影效果，每个阴影设置用逗号分隔；
2. 当有多个阴影时，这些阴影是层层叠加的，并且box-shadow属性中最前面的阴影层叠在最上层，依次类推；
3. 不仅可以设置偏移效果的阴影，而且可以设置扩张（外延）效果的阴影；
4. 可以设置内阴影、外阴影；

这些特性的示例效果如下：
CSS样式：

非扩张阴影：box-shadow: 10px 20px 0 blue;
扩张阴影：box-shadow: 0 0 0 20px blue;
内阴影：box-shadow: inset 0 0 0 20px blue;

示例效果：

阴影效果示例

用阴影实现环形效果：

从刚才了解到的阴影box-shadow属性的特性可知，我们可以设置多个扩张阴影，并且扩张阴影的扩张半径逐个叠加，通过如此设置，便可以得到想要的环形效果；如果想得到圆环或者椭环，只需要通过border-radius设置适合的圆角即可，因为阴影的形状会与边框保持一致；

示例代码如下：

CSS样式：

border-radius: 10%;    /*圆角*/
box-shadow: 0 0 0 10px red, 
                     0 0 0 20px green , 
                     0 0 0 30px blue;

示例效果：

多重阴影

此方案的优点：

1. 用单个元素实现，不用添加冗余元素；
2. 可以实现任意多颜色的交替的环形；
3. 能实现圆环、椭环、方环、扇形环等等，一切圆角可实现的形状的环类效果；

此方案缺点：

1. 对于重复的环形，必须通过手动设置来实现；
2. 阴影不会影响布局，而且也不会受到box-sizing属性的影响，不过可以通过内边距或外边距（这取决于阴影是内阴影还是外阴影）来模拟出阴影所占据的空间；
3. 当阴影是外阴影时，阴影区域不会响应鼠标事件；

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