环形效果如下所示：
环形.png
环形效果的特点就是：多个颜色条交替排列，相邻颜色条之间的过渡是突变的效果；
所以，可以用颜色突变的方案来实现环形效果；
根据我的《CSS中颜色突变的实现方案》，有如下方案可实现环形效果（以圆环为例）：
备注：
如果没有看过我的《CSS中颜色突变的实现方案》，建议先看下，然后再来看这篇文章；
方案1：多个元素层叠
这个方案的思路比较直观，就是用多个单色填充的元素以相同的中心位置层叠，元素可以通过border-radius实现圆形效果，越小的圆形越靠上，如下图：
3d层叠效果
此方案优点：
- 原型直观，易理解；
- 可以实现任意多颜色的环形效果；
- 能实现圆环、椭环、方环、扇形环等等，一切圆角可实现的形状的环类效果；
此方案缺点：
- 添加了较多冗余的元素；
- 需要根据圆环计算条个元素的尺寸；
方案2：径向渐变
这个方案是通过 《CSS中颜色突变的实现方案》/方案2-插入颜色渐变辅助色标 实现环形效果的，由于环形往往是交替重复出现的，所以最好用重复径向渐变函数repeating-radial-gradient() 来实现；
以实现红、绿、蓝3个颜色的水平环形效果为例：
示例代码：
background-image: repeating-radial-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);
示例效果：
径向重复渐变
此方案的优点：
- 用单个元素实现，不用添加冗余元素；
- 可以实现任意多颜色的交替重复的环形；
- 能实现圆环、椭环以及多种图形层叠出的圆形；
此方案缺点：
- 实现方环时较麻烦；
方案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属性语法上可以看出：
- box-shadow可以设置多个阴影效果，每个阴影设置用逗号分隔；
- 当有多个阴影时，这些阴影是层层叠加的，并且box-shadow属性中最前面的阴影层叠在最上层，依次类推；
- 不仅可以设置偏移效果的阴影，而且可以设置扩张（外延）效果的阴影；
- 可以设置内阴影、外阴影；
这些特性的示例效果如下：
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;
示例效果：
多重阴影
此方案的优点：
- 用单个元素实现，不用添加冗余元素；
- 可以实现任意多颜色的交替的环形；
- 能实现圆环、椭环、方环、扇形环等等，一切圆角可实现的形状的环类效果；
此方案缺点：
- 对于重复的环形，必须通过手动设置来实现；
- 阴影不会影响布局，而且也不会受到box-sizing属性的影响，不过可以通过内边距或外边距（这取决于阴影是内阴影还是外阴影）来模拟出阴影所占据的空间；
- 当阴影是外阴影时，阴影区域不会响应鼠标事件；
相关文章:《 CSS中特殊效果的实现方案》
网友评论