首页 纯css完成网页中某块内容圆角边框等后果[宝典]

纯css完成网页中某块内容圆角边框等后果[宝典]

纯css完成网页中某块内容圆角边框等后果[宝典]纯css完成网页中某块内容圆角边框等后果[宝典] 简洁型圆角矩形方法1 code1: .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,,,,,#9...

纯css完成网页中某块内容圆角边框等后果[宝典] 简洁型圆角矩形方法 1 code1: .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;}

简洁型css圆角矩形

方法2: div.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}
无图片实现圆角框

3D圆角矩形: CODE: .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{background:#ccc;border-left:1px,,,,,solid,,,,,#ddd;border-right:1px,,,,,solid,,,,,#999;} .raised,,,,,.b2b{background:#ccc;border-left:1px,,,,,solid,,,,,#aaa;border-right:1px,,,,,solid,,,,,#999;} .raised,,,,,.b1{margin:0,,,,,5px;background:#fff;} .raised,,,,,.b2,,,,,,.raised,,,,,.b2b{margin:0,,,,,3px;border-width:0,,,,,2px;} .raised,,,,,.b3,,,,,,.raised,,,,,.b3b{margin:0,,,,,2px;} .raised,,,,,.b4,,,,,,.raised,,,,,.b4b{height:2px;,,,,,margin:0,,,,,1px;} .raised,,,,,.b1b{margin:0,,,,,5px;,,,,,background:#999;} .raised,,,,,.boxcontent{display:block;background:#ccc;border-left:1px,,,,,solid,,,,,#fff;border-right:1px,,,,,solid,,,,,#999;}

3D圆角矩形

反向css圆角矩形

略带菱形的css圆角矩形

特殊css圆角矩形

纯css完成网页中某块内容圆角边框等后果[宝典]

3D圆角矩形

反向css圆角矩形

略带菱形的css圆角矩形

特殊css圆角矩形

你可能还喜欢