CSS圆角边框.doc

简洁型css圆角： 方法1： 简洁型css圆角矩形 code1: style type=text/css.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}.b1,.b1b{margin:0 5px;background:#999;}.b2,.b2b{margin:0 3px;border-width:2px;}.b3,.b3b{margin:0 2px;}.b4,.b4b{height:2px;margin:0 1px;}.d1{background:#F7F8F9;}.k {height:300px;}/style/headbodydivb class=b1/bb class=b2 d1/bb class=b3 d1/bb class=b4 d1/bdiv class=b d1 kfont style=font-size:26px;color:red; margin:0px 10px;简洁型css圆角矩形/font/divb class=b4b d1/bb class=b3b d1/bb class=b2b d1/bb class=b1b/b/div 方法2： 无图片实现圆角框 code2: style type=text/cssdiv.RoundedCorner{background:#9BD1FA; width:400px;}b.rtop, b.rbottom{display:block;background: #FFF}b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}b.r1{margin: 0 5px}b.r2{margin: 0 3px}b.r3{margin: 0 2px}b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}/stylediv class=RoundedCornerb class=rtopb class=r1/bb class=r2/bb class=r3/bb class=r4/b/bbr无图片实现圆角框brbrb class=rbottomb class=r4/bb class=r3/bb class=r2/bb class=r1/b/b/div 3D圆角矩形: 3D圆角矩形 CODE: style type=text/css.raised{background:transparent;width:40%;}.raised h1,.raised p{margin:0 10px;}.raised h1{font-size:2em;color:#fff;}.raised p{padding-bottom:0.5em;}.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:block;overflow:hidden;font-size:1px;}.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}.raised .b2{background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}.raised .b3{background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}.raised .b4{background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}.raised .b4b{background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}.raised .b3b