模拟阴影效果纯CSS圆角矩形

<script type="text/javascript"><!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



代码如下：






css
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->.bBox{width:300px;}
.bBox-t1,.bBox-t2,.bBox-b1,.bBox-b2{height:1px;overflow:hidden; margin:0px;}
.bBox-t1{border:0px;margin:0px 2px 0px 1px;}
.bBox-t2{border-width:0px 1px;border-style:solid;margin-right:1px;}
.bBox-offset{margin:0px;border:0px;}
.bBox-body{border-width:0px 1px;border-style:solid;margin-right:1px;}
.bBox-b2{background:#88CB8C;border-width:0px 2px 0px 0px;border-style:solid;margin-left:1px;}
.bBox-b1{margin:0px 1px 0px 2px;}
.bBox-body *{margin:0px;}
/*边框颜色*/
.bBox-t1,.bBox-b2{background:#88CB8C;}
.bBox-t2,.bBox-body{border-color:#88CB8C;}
/*背景颜色*/
.bBox-t2,.bBox-body{background:#B8E0BA;}
/*阴影颜色*/
.bBox-offset,.bBox-b1{background:#0D7813;}
.bBox-b2{border-color:#0D7813}
/*---------------------------------*/







html
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->div class="bBox">
div class="bBox-t1">div>
div class="bBox-t2">div>
div class="bBox-offset">
div class="bBox-body">
h1>模拟阴影效果纯CSS圆角矩形h1>
ul>
li>调用方便li>
li>支持多浏览器li>
li>快捷更换边框、背景及阴影颜色li>
ul>
div>
div>
div class="bBox-b2">div>
div class="bBox-b1">div>
div>

效果：



就取名bBox吧～支持ie，firefox，chrome，其他的没试过，替换颜色和调用还是相当方便的。本来想把背景颜色，边框颜色，阴影颜色写在一起，每次只要改3个地方就行，可是bBox-b2实在是太郁闷了，搞不定，只能麻烦点，每次改6个地方了