none
用CSS编辑出来的圆角矩形,在页面中实现,内部的内容以该放在哪个div中? RRS feed

答案


  • <html> 
    <head> 
    <title>div+css制作圆角矩形</title> 
    <style type="text/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}/*---------------------------------*/


    </style>
    </head> 
    <body> 

     

    <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>

     

     

    </body> 
    </html> 


    努力+方法=成功
    • 已标记为答案 KeFang Chen 2009年12月18日 3:40
    2009年12月17日 5:11