[css]代码库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圆角边框</title>
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {
margin:0 10px;
letter-spacing:1px;
padding:0;
}
#xsnazzy h1 {
font-size:2.5em;
color:#A95051;
}
#xsnazzy h2 {
font-size:2em;
color:#7B793B;
border:0;
}
#xsnazzy p {
padding-bottom:0.5em;
}
#xsnazzy h2 {
padding-top:0.5em;
}
#xsnazzy {
background: transparent;
margin-top: 100px;
margin-right: 10em;
margin-bottom: 100px;
margin-left: 10em;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#FFF;
border-left:1px solid #A93298;
border-right:1px solid #A93298;
}
.xb1 {
margin:0 5px;
background:#A93298;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
background:#FFF;
border:0 solid #A93298;
border-width:0 1px;
}
</style>
</head>
<body>
<div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p>CSS圆角边框</p>
<p>CSS圆角边框</p>
<p>CSS圆角边框</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>
</body>
</html>
[代码运行效果截图]