DIV+CSS圆角边框
简洁型css圆角：
方法1：
简洁型css圆角矩形
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:1pxsolid#999;border-right:1pxsolid#999;}
.b1,.b1b{
}{margin:05px;background:#999;}
.b2,.b2b{
}{margin:03px;border-width:2px;}
.b3,.b3b{
}{margin:02px;}
.b4,.b4b{
}{height:2px;margin:01px;}
.d1{
}{background:#F7F8F9;}
.k{
}{height:300px;}
简洁型css圆角矩形
方法2：
无图片实现圆角框
code2:
div.RoundedCorner{
}{background:#9BD1FA;width:400px;}
b.rtop,b.rbottom{
}{display:block;background:#FFF}
b.rtopb,b.rbottomb{
}{display:block;height:1px;overflow:hidden;background:#9BD1FA}
b.r1{
}{margin:05px}
b.r2{
}{margin:03px}
b.r3{
}{margin:02px}
b.rtopb.r4,b.rbottomb.r4{
}{margin:01px;height:2px}
无图片实现圆角框
3D圆角矩形:
3D圆角矩形
CODE:
.raised{
}{background:transparent;width:40%;}
.raisedh1,.raisedp{
}{margin:010px;}
.raisedh1{
}{font-size:2em;color:#fff;}
.raisedp{
}{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:1pxsolid#fff;border-right:1pxsolid#eee;}
.raised.b3{
}{background:#ccc;border-left:1pxsolid#fff;border-right:1pxsolid#ddd;}
.raised.b4{
}{background:#ccc;border-left:1pxsolid#fff;border-right:1pxsolid#aaa;}
.raised.b4b{
}{background:#ccc;border-left:1pxsolid#eee;border-right:1pxsolid#999;}
.raised.b3b{
}{background:#ccc;border-left:1pxsolid#ddd;border-right:1pxsolid#999;}
.raised.b2b{
}{background:#ccc;border-left:1pxsolid#aaa;border-right:1pxsolid#999;}
.raised.b1{
}{margin:05px;background:#fff;}
.raised.b2,.raised.b2b{
}{margin:03px;border-width:02px;}
.raised.b3,.raised.b3b{
}{margin:02px;}
.raised.b4,.raised.b4b{
}{height:2px;margin:01px;}
.raised.b1b{
}{margin:05px;background:#999;}
.raised.boxcontent{
}{display:block;background:#ccc;border-left:1pxsolid#fff;border-right:1pxsolid#999;}
3D圆角矩形
反向css圆角矩形:
反向css圆角矩形
CODE:
.serif{
}{
background:transparent;width:40%;
}
.serifh1,.serifp{
}{
margin:010px;
}
.serifh1{
}{
font-size:2em;color:#fff;
}
.serifp{
}{
padding-bottom:0.5em;
}
.serif.b1,.serif.b2,.serif.b3,.serif.b4{
}{
display:block;
overflow:hidden;
font-size:1px;
}
.serif.b1,.serif.b2,.serif.b3{
}{
height:1px;
}
.serif.b2,.serif.b3{
}{
background:#fc0;
border-left:1pxsolid#fff;
border-right:1pxsolid#fff;
}
.serif.b4{
}{
background:#fc0;
border-left:1pxsolid#fff;
border-right:1pxsolid#fff;
}
.serif.b1{
}{
margin:0;background:#fff;
}
.serif.b2{
}{
margin:01px;
border-width:02px;
}
.serif.b3{
}{
margin:03px;
}
.serif.b4{
}{
height:2px;
margin:04px;
}
.serif.boxcontent{
}{
display:block;
background:#fc0;
border-left:1pxsolid#fff;
border-right:1pxsolid#fff;
margin:05px;
}
反向css圆角矩形
略带菱形的css圆角:
略带菱形的css圆角矩形
CODE:
.curved{
}{
background:transparent;
width:40%;
}
.curvedh1,.curvedp{
}{
margin:010px;
}
.curvedh1{
}{
font-size:2em;
color:#fff;
}
.curvedp{
}{
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:1pxsolid#fff;
border-right:1pxsolid#fff;
}
.curved.b1{
}{
margin:04px;
background:#fff;
}
.curved.b2{
}{
margin:04px;
height:2px;
}
.curved.b3{
}{
margin:03px;
}
.curved.b4{
}{
margin:0;
height:1px;
border-width:03px03px;
}
.curved.boxcontent{
}{
display:block;
background:#e0cea3;
border:0solid#fff;
border-width:01px;
}
略带菱形的css圆角矩形
特殊CSS圆角：
特殊css圆角矩形
CODE：
.pillar{
}{
background:transparent;
width:40%;
}
.pillarh1,.pillarp{
}{
margin:010px;
}
.pillarh1{
}{
font-size:2em;
color:#fff;
}
.pillarp{
}{
padding-bottom:0.5em;
}
.pillar.b1,.pillar.b2,.pillar.b3,.pillar.b4{
}{
display:block;
overflow:hidden;
font-size:1px;
}
.pillar.b1,.pillar.b2,.pillar.b4{
}{
height:1px;
}
.pillar.b2,.pillar.b3{
}{
background:#d66;
border-left:1pxsolid#fff;
border-right:1pxsolid#fff;
}
.pillar.b4{
}{
background:#d66;
border-left:4pxsolid#fff;
border-right:4pxsolid#fff;
}
.pillar.b1{
}{
margin:02px;
background:#fff;
}
.pillar.b2{
}{
margin:01px;
border-width:01px;
}
.pillar.b3{
}{
height:2px;
margin:0;
}
.pillar.b4{
}{
margin:02px;
}
.pillar.boxcontent{
}{
display:block;
background:#d66;
border-left:1pxsolid#fff;
border-right:1pxsolid#fff;
margin:05px;
}
