css生成圆角边框

最新推荐文章于 2022-01-21 17:02:25 发布

a617717

最新推荐文章于 2022-01-21 17:02:25 发布

阅读量126

点赞数

原文链接：http://www.cnblogs.com/wangchenran/archive/2012/09/18/2690731.html

版权

 <!--   ----圆角边框--------->
        <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;
}
/********************************************************/