.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;}
</style>
</head>
<body>
<div class=”raised”>
<b class=”b1″></b><b class=”b2″></b><b class=”b3″></b><b class=”b4″></b>
<div class=”boxcontent”>
<h1>3D圆角矩形</h1>
</div>
<b class=”b4b”></b><b class=”b3b”></b><b class=”b2b”></b><b class=”b1b”></b>
</div>
反向css圆角矩形:
.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 .b1K, .serif .b2K, .serif .b3K, .serif .b4K {display:block;overflow:hidden;font-size:1px;}.serif .b1K, .serif .b2K, .serif .b3K {height:1px;}.serif .b2K, .serif .b3K {background:#fc0;border-left:1px solid #fff;border-right:1px solid #fff;}.serif .b4K {background:#fc0;border-left:1px solid #fff;border-right:1px solid #fff;}.serif .b1K {margin:0; background:#fff;}.serif .b2K {margin:0 1px;border-width:0 2px;}.serif .b3K {margin:0 3px;}.serif .b4K {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圆角矩形
CODE:
复制代码
<style type=”text/css”>
.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 {}{
display: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; background:#fff;
}
.serif .b2 {}{
margin:0 1px;
border-width:0 2px;
}
.serif .b3 {}{
margin:0 3px;
}
.serif .b4 {}{
height:2px;
