之前有写过用纯CSS实现圆角边的效果，这里同样基于之前的代码实现圆角边但是多添加一个边框向内的阴影效果，为什么使用圆角边框呢？这样让网站看起来比较圆滑不是更舒服吗。使用纯css代码实现圆角边及阴影效果如下，
HTML代码：
[code]<div class=”xsnazzy”>
<b class=”xtop”>
<b class=”xb1_y”></b>
<b class=”xb2_y”></b>
<b class=”xb3_y”></b>
<b class=”xb4_y”></b>
</b>
<div class=”xboxcontent_y1″>
<div class=”xboxcontent_y2″>
<div class=”xboxcontent_y3″>
<div class=”xboxcontent_y4″>
这里写内容
</div>
</div>
</div>
</div>
<b class=”xbottom_y”>
<b class=”xb4_y”></b>
<b class=”xb3_y”></b>
<b class=”xb2_y”></b>
<b class=”xb1_y”></b>
</b>
</div> <!–xsnazzy–>[/code]
CSS代码：
[code].xtop_y, .xbottom_y {display:block; background:transparent; font-size:1px;margin:0 auto;}
.xb1_y, .xb2_y, .xb3_y, .xb4_y {display:block; overflow:hidden;}
.xb1_y, .xb2_y, .xb3_y {height:1px;}
.xb2_y, .xb3_y, .xb4_y {background:#B6B6B6;}
.xb1_y {margin:0 4px; background:#B6B6B6;}
.xb2_y {margin:0 3px; border-width:0 2px;}
.xb3_y {margin:0 2px;}
.xb4_y {height:2px; margin:0 1px;}
.xboxcontent_y1 {display:block; border:0 solid #B6B6B6;margin:0 auto;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;}
.xboxcontent_y2 {display:block; border:0 solid #B6B6B6;margin:0 auto;border-left:1px solid #f7f7f7;border-right:1px solid #f7f7f7;}
.xboxcontent_y3 {display:block; border:0 solid #B6B6B6;margin:0 auto;border-left:1px solid #fafafa;border-right:1px solid #fafafa;}
.xboxcontent_y4 {display:block; border:0 solid #B6B6B6;margin:0 auto;border-left:1px solid #fcfcfc;border-right:1px solid #fcfcfc;}
.xb1_y{background:#d6d6d6;}
.xb2_y{border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6;background:#f7f7f7}
.xb3_y{border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6;background:#fafafa}
.xb4_y{border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6;background:#fcfcfc}[/code]
同样使用这种方法可以实现向外的阴影效果不使用图片和CSS3就能实现兼容低版本的浏览器，效果跟本站首页的边框一样。