圆角边框的做法
最近在整理一些关于HTML/CSS标准化的东西，在这里分享一下其中之一：圆角边框的做法。
圆角的做法有很多，目前主流网站的通常做法都是图片采用X形状的拼接：
html代码：
<div>
<span><span></span></span>
<h3>头部标题</h3>
<div>
<p>背景图采用X形状</p>
</div>
<span><span></span></span>
</div>
CSS代码：
.box {
width: 300px;
}.box .hd, .box .tp, .box .bt, .box .tp span, .box .bt span {
background: url(images/boxbg.gif) no-repeat 0 0;
overflow:hidden;
}
.box .tp, .box .bt {
display: block;
height: 4px;
position: relative;
}
.box .tp span, .box .bt span {
float: right;
height: 4px;
width: 4px;
}
.box .tp {
background-position: -4px 0;
margin-bottom: -4px;
}
.box .tp span {
background-position: 0 0;
}
.box .bt {
background-position: -4px -4px;
margin-top: -4px;
}
.box .bt span {
background-position: 0 -4px;
}
.box h3 {
height: 22px;
line-height: 22px;
background-color: #f4f8fc;
background-position: 0 -8px;
background-repeat: repeat-x;
border: 1px solid #b8d6ee;
border-bottom: none;
color: #404040;
font-size: 12px;
padding-left: 10px;
}
.box .center {
background-color: #fff;
border: 1px solid #b8d6ee;
padding: 10px;
height:80px;
}
最终效果：
