《纯CSS实现网页中某块内容圆角边框等效果.doc》由会员分享，可在线阅读，更多相关《纯CSS实现网页中某块内容圆角边框等效果.doc（7页珍藏版）》请在金锄头文库上搜索。
1、简洁型圆角矩形方法1code1:.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.bdisplay:block;overflow:hidden;.b1,.b2,.b3,.b1b,.b2b,.b3bheight:1px;.b2,.b3,.b4,.b2b,.b3b,.b4b,.bborder-left:1px solid #999;border-right:1px solid #999;.b1,.b1bmargin:0 5px;background:#999;.b2,.b2bmargin:0 3px;border-width:2px;.b3,.b3bmargin:0 2px
2、;.b4,.b4bheight:2px;margin:0 1px;.d1background:#F7F8F9;.k height:300px;简洁型css圆角矩形方法2：div.RoundedCornerbackground:#9BD1FA; width:400px;b.rtop, b.rbottomdisplay:block;background: #FFFb.rtop b, b.rbottom bdisplay:block;height: 1px;overflow: hidden; background: #9BD1FAb.r1margin: 0 5pxb.r2margin: 0 3pxb
3、.r3margin: 0 2pxb.rtop b.r4, b.rbottom b.r4margin: 0 1px;height: 2px无图片实现圆角框3D圆角矩形:CODE:.raisedbackground:transparent;width:40%;.raised h1,.raised pmargin:0 10px;.raised h1font-size:2em;color:#fff;.raised ppadding-bottom:0.5em;.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b
4、,.raised .b3b,.raised .b4bdisplay:block;overflow:hidden;font-size:1px;.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3bheight:1px;.raised .b2background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;.raised .b3background:#ccc;border-left:1px solid #fff;border-ri
5、ght:1px solid #ddd;.raised .b4background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;.raised .b4bbackground:#ccc;border-left:1px solid #eee;border-right:1px solid #999;.raised .b3bbackground:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;.raised .b2bbackground:#ccc;borde
6、r-left:1px solid #aaa;border-right:1px solid #999;.raised .b1margin:0 5px;background:#fff;.raised .b2, .raised .b2bmargin:0 3px;border-width:0 2px;.raised .b3, .raised .b3bmargin:0 2px;.raised .b4, .raised .b4bheight:2px; margin:0 1px;.raised .b1bmargin:0 5px; background:#999;.raised .boxcontentdisp
7、lay:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;3D圆角矩形反向css圆角矩形:CODE:.serif background: transparent; width:40%; .serif h1, .serif p margin:0 10px; .serif h1 font-size:2em; color:#fff; .serif p padding-bottom:0.5em; .serif .b1, .serif .b2, .serif .b3, .serif .b4 displ
8、ay:block; overflow:hidden; font-size:1px; .serif .b1, .serif .b2, .serif .b3 height:1px; .serif .b2, .serif .b3 background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; .serif .b4 background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; .serif .b1 margin:0; backgrou
9、nd:#fff; .serif .b2 margin:0 1px; border-width:0 2px; .serif .b3 margin:0 3px; .serif .b4 height:2px; margin:0 4px; .serif .boxcontent display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px; 反向css圆角矩形略带菱形的css圆角:CODE:.curved background:transparent; width
10、:40%; .curved h1, .curved p margin:0 10px; .curved h1 font-size:2em; color:#fff; .curved p padding-bottom:0.5em; .curved .b1, .curved .b2, .curved .b3, .curved .b4 display:block; overflow:hidden; height:1px; font-size:1px; .curved .b2, .curved .b3, .curved .b4 background:#e0cea3; border-left:1px sol
11、id #fff; border-right:1px solid #fff; .curved .b1 margin:0 4px; background:#fff; .curved .b2 margin:0 4px; height:2px; .curved .b3 margin:0 3px; .curved .b4 margin:0; height:1px; border-width:0 3px 0 3px; .curved .boxcontent display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px; div clas
