zoukankan      html  css  js  c++  java
  • css生成圆角边框

     <!--   ----圆角边框--------->
            <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;
    }
    /********************************************************/
  • 相关阅读:
    ORACLE CLIENT客户端安装步骤详解
    mkswap 把一个分区格式化成为swap交换区
    编译安装lnmp
    使用源代码安装lnmp
    查看nginx编译安装
    linux lnmp编译安装
    nginx编译安装
    lnmp脚本
    搭建LAMP测试环境
    绝路上的桥
  • 原文地址:https://www.cnblogs.com/wangchenran/p/2690731.html
Copyright © 2011-2022 走看看