.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;padding: 8px;}
.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>
<head>
<style type="text/css">
    @import url("css.css");
    li 
{font-size: 12px}
</style>
<title></title>
</head>
<body>
<div class="bBox">
    
<div class="bBox-t1"></div>
    
<div class="bBox-t2"></div>
    
<div class="bBox-offset">
        
<div class="bBox-body">
                
<h4>模拟阴影效果纯CSS圆角矩形</h4>
                
<ul>
                    
<li>调用方便</li>
                    
<li>支持多浏览器</li>
                    
<li>快捷更换边框、背景及阴影颜色</li>
                
</ul>
        
</div>
    
</div>
    
<div class="bBox-b2"></div>
    
<div class="bBox-b1"></div>
</div>
</body>
</html>

 

 

posted on 2011-04-28 13:33  雨季  阅读(354)  评论(0编辑  收藏  举报