源码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8 { height:1px; font-size:1px; overflow:hidden; display:block; } .b1, .b8 { margin:0 5px;/*上下0，左右5*/ } .b2, .b7 { margin:0 3px; border-right:2px solid; border-left:2px solid; } .b3, .b6 { margin:0 2px; border-right:1px solid; border-left:1px solid; } .b4, .b5 { margin:0 1px; border-right:1px solid; border-left:1px solid; height:2px; } .sharp { float:left; margin:20px auto 0; margin-right:20%; padding:1px; } .content { height:180px; border-right:1px solid; border-left:1px solid; overflow:hidden; width:160px; } /*蓝色边框*/ .color .b1, .color .b2, .color .b3, .color .b4, .color .b5, .color .b6, .color .b7, .color .b8, .color .content { border-color:blue; /*边框色*/ } .color .b1, .color .b8 { background-color:blue;/*背景色*/ } .color .b2, .color .b3, .color .b4, .color .b5, .color .b6, .color .b7, .color .content { background-color:#eff7ff; } </style> </head> <body> <div class="sharp color"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"></div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div> </body> </html>
效果:
在非ie浏览器中，可以设置border-radius属性来实现圆角效果。