margin:0 4px;
}
.serif .boxcontent {}{
display:block;
background:#fc0;
border-left:1px solid #fff;
border-right:1px solid #fff;
margin:0 5px;
}
</style>
<div class=”serif”>
<b class=”b1″></b><b class=”b2″></b><b class=”b3″></b><b class=”b4″></b>
<div class=”boxcontent”>
<h1>反向css圆角矩形</h1>
</div>
<b class=”b4″></b><b class=”b3″></b><b class=”b2″></b><b class=”b1″></b>
</div>
略带菱形的css圆角:
.curved {background:transparent;width:40%;}.curved h1, .curved p {margin:0 10px;}.curved h1 {font-size:2em;color:#fff;}.curved p {padding-bottom:0.5em;}.curved .b1q, .curved .b2q, .curved .b3q, .curved .b4q {display:block;overflow:hidden;height:1px;font-size:1px;}.curved .b2q, .curved .b3q, .curved .b4q {background:#e0cea3;border-left:1px solid #fff;border-right:1px solid #fff;}.curved .b1q {margin:0 4px;background:#fff;}.curved .b2q {margin:0 4px;height:2px;}.curved .b3q {margin:0 3px;}.curved .b4q {margin:0;height:1px;border-width:0 3px 0 3px;}.curved .boxcontent {display:block;background:#e0cea3;border:0 solid #fff;border-width:0 1px;}
略带菱形的css圆角矩形
CODE:
复制代码
<style type=”text/css”>
.curved {}{
background:transparent;
width: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 solid #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;
}
</style>
<div class=”curved”>
<b class=”b1″></b><b class=”b2″></b><b class=”b3″></b><b class=”b4″></b>
