css生成圆角边框
<!-- ----圆角边框---------> <div id="xsnazzy1"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"> </b></b> <div id="xboxcontent1"> <!-- ----内容---------> <!-- -----------------> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"> </b></b> </div>
css 部分
/*------------圆角边框css样式--------------*/ #xsnazzy h1, #xsnazzy h2, #xsnazzy p { margin: 0 10px; letter-spacing: 1px; } #xsnazzy h1 { font-size: 2.5em; color: #fff; } #xsnazzy h2 { font-size: 2em; color: #06a; border: 0; } #xsnazzy p { padding-bottom: 0.5em; } #xsnazzy h2 { padding-top: 0.5em; } .xtop, .xbottom { display: block; background: transparent; font-size: 1px; } .xb1, .xb2, .xb3, .xb4 { display: block; overflow: hidden; } .xb1, .xb2, .xb3 { height: 1px; } .xb2, .xb3, .xb4 { /* background: #FCFCFC; 背景颜色 */ border-left: 1px solid #CCCCCC; /* 边框颜色 */ border-right: 1px solid #CCCCCC; /* 边框颜色 */ } .xb1 { margin: 0 5px; background: #CCCCCC; /* 边框颜色 */ } .xb2 { margin: 0 3px; border-width: 0 2px; } .xb3 { margin: 0 2px; } .xb4 { height: 2px; margin: 0 1px; } #xboxcontent1 { height: 740px; display: block; /* background: #FCFCFC; 背景颜色 */ border: 0 solid #CCCCCC; /* 边框颜色 */ border-width: 0 1px; } #xsnazzy1 { width: 100%; margin: 5px 0px; } /********************************************************/