CSS3实现圆环内阴影效果

这是一个关于CSS3灵活应用的例子，圆环的内阴影效果。
比如说，我想做一个根据加载进度不同圆环动态填充的效果，如下图：

进度环效果.png

动态效果用SVG+CSS3动画可以很轻松的实现（stroke-dasharray定义成圆的周长，stroke-dashoffset根据参数值变化，利用transition: stroke-dashoffset来实现动态填充）。
如果是下面这种，非常好实现的

无阴影的进度环效果.png

只需要SVG绘制两个圆形。

#base{ stroke: #a4a4a4; stroke-width: 24px; fill:none;}
#dynamic { stroke: #f88566;stroke-width: 30px; fill:none;stroke-linecap:round;
stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear;stroke-dasharray:942.61;}
/*通过js获取进度值转换成对应的stroke-dashoffset值来实现动画效果*/
<circle id="base" r="150" cx="200" cy="200" ></circle> /*底部灰色圆环*/
<circle id="dynamic" r="150" cx="200" cy="200"></circle> /*橙色动态圆环*/

可是作为一个傲娇的设计师，不可放弃自己对细节的追求！一定要实现这种阴影效果。我们先来看一下ps里面是怎么实现这种效果的

圆环内阴影样式.png

非常简单的给圆环一个深色内发光效果。那在CSS3里怎么办呢？我们变通一下思路，如果在ps里，我不是用圆环的内发光效果来实现，而是用下面这种一个深色外发光的大圆

内发光的大圆.png

然后叠加一个外发光的小圆

外发光的小圆.png
同样可以实现圆环的内阴影效果。
有了这个基础，如何用CSS3绘制就一目了然了。先定义两个div，来进行圆形的绘制border-radius:50%是绘制圆形的语法。

#circle1{box-shadow:inset 0 0 20px 0 rgba(0,0,0,0.8); border-radius:50%;} /*大圆*/
#circle2{box-shadow: 0 0 20px 0 rgba(0,0,0,0.8); border-radius:50%;} /*大圆*/
/*对应的html代码*/
<div id="circle1"></div><div id="circle2"></div>

来看一下浏览器的效果（为了方便观察，暂时把两个圆形部分重叠）

CSS3实现的两个圆的内发光和外发光效果.png

剩下的工作就是做一些调整了，从上图可以看出来，投影颜色偏浅，这里我对box-shadow进行一些微调，并通过调整位置让两个圆的圆心重叠。

#circle1{box-shadow:inset 0 0 10px 5px rgba(0,0,0,0.8);}
#circle2{box-shadow:0 0 10px 5px rgba(0,0,0,0.8);}

就得到了下面这种效果

CSS3实现的最终效果.png

就像我在《UI设计师进阶技能——CSS3之样式篇》里面提到的一样，掌握基本的语法之后，灵活运用是关键。