就是在地面上打凿出凹的圆环效果，利用linear-gradient线性渐变增强内环质感，再用伪类after元素设置中心圆凸块的位置以及大小与跟内环之间的阴影度，然后设置内环的颜色就行了；第四个环上面的第二小凸块也同样适用伪类after元素然后设置z-index的顺序。
在linear-gradient段内可以见到各种浏览器支持提示，Firefox Chrome完美效果，IE8以下效果不怎么样, 如果IE采用css3pie.com的htc插件应该会好一些。
点击这里查看效果
代码如下：
1 <style>body,html{ 2 height:100%; width: 100%; 3 } 4 body{ 5 font-size: 100%; 6 background-color: #ddd; 7 color: #524d46; 8 text-align: center; 9 } 10 11 12 .circlegraph {display: block; width: 12em; height: 12em; border-radius: 50%; box-shadow: .30em .375em .625em rgba(0,0,0,.25) inset, 0em 0em 1.25em rgba(0,0,0,.2) inset; position: absolute; left: 50%; top: 50%; margin-left: -6em; margin-top: -6em; 13 14 background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */ 15 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */ 16 background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */ 17 background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */ 18 background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */ 19 background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* W3C */ 20 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */ 21 22 } 23 /* keleyi.com */ 24 .circlegraph:after {display: block; content: ""; width: 8em; height: 8em; background-color: #f9f8f4; border-radius: 50%; position: absolute; left: 2em; top: 2em; box-shadow: 0 0 1em rgba(0,0,0,.25);} 25 26 .white {margin-left:-500px;} 27 .blue {background-color: #26b7ff;margin-left:-250px;} 28 .orange {background-color: #ff9300;margin-left:0px;} 29 .red {background-color: #DE6040;margin-left:250px;} 30 .above:after {display: block; content: ""; width: 4em; height: 4em; background-color: #fff; border-radius: 50%; position: absolute; left: 4em; top: 4em; box-shadow: 0.1em 0.4em 0.5em rgba(0,0,0,.25);z-index: 1;}</style> 31 32 33 34 <div> 35 <a href="http://keleyi.com/a/bjac/4dc3diua.htm">原文</a></div> 36 <div class="circlegraph white"></div> 37 <div class="circlegraph orange"></div> 38 <div class="circlegraph blue"></div> 39 <div class="circlegraph red"><div class="above"></div></div>
