類比陰影製作效果純CSS圓角矩形[原創]

項目上需要個快顯功能表，要求要陰影+圓角。。陰影不敢用PNG格式，客戶大多是使用IE6的，用濾鏡又不好控制。乾脆搞個純CSS的像素圓角+陰影（類比）吧，哈哈。

思路是這樣的：

 

 

代碼如下：

css
.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
<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個地方了。