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

 

 

转载于:https://www.cnblogs.com/yuji/archive/2011/04/28/2031671.html