您的位置:首页 > Web前端 > CSS

css生成圆角边框

2012-09-18 15:45 225 查看
<!--   ----圆角边框--------->
<div id="xsnazzy1">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4">
</b></b>
<div id="xboxcontent1">
<!--   ----内容--------->
<!--   ----------------->
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1">
</b></b>
</div>


css 部分

/*------------圆角边框css样式--------------*/
#xsnazzy h1, #xsnazzy h2, #xsnazzy p
{
margin: 0 10px;
letter-spacing: 1px;
}
#xsnazzy h1
{
font-size: 2.5em;
color: #fff;
}
#xsnazzy h2
{
font-size: 2em;
color: #06a;
border: 0;
}
#xsnazzy p
{
padding-bottom: 0.5em;
}
#xsnazzy h2
{
padding-top: 0.5em;
}
.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: #FCFCFC;    背景颜色  */
border-left: 1px solid #CCCCCC; /*   边框颜色  */
border-right: 1px solid #CCCCCC; /*   边框颜色  */
}
.xb1
{
margin: 0 5px;
background: #CCCCCC; /*   边框颜色  */
}
.xb2
{
margin: 0 3px;
border-width: 0 2px;
}
.xb3
{
margin: 0 2px;
}
.xb4
{
height: 2px;
margin: 0 1px;
}
#xboxcontent1
{
height: 740px;
display: block; /* background: #FCFCFC;   背景颜色  */
border: 0 solid #CCCCCC; /*   边框颜色  */
border-width: 0 1px;
}
#xsnazzy1
{
width: 100%;
margin: 5px 0px;
}
/********************************************************/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: