3D圆角
<html>
<head>
<title>3D圆角</title>
<style type="text/css">
.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;
}
</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>
</body>
</html>
