[CSS3] 几种分割线实现方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .demo {
                width: 600px;
            }
            .demo-container {
                clear: both;
                padding: 30px 20px;
                text-align: left;
                margin: 0 auto;
                line-height: 18px;
            }


            .line-01 {
                margin: 20px 0;
                line-height: 1px;
                border-left: 200px solid #ddd;
                border-right: 200px solid #ddd;
                text-align: center;
            }

            .line-02 {
                height: 1px;
                border-top: 1px solid #ddd;
                text-align: center;
            }
            .line-02 span {
                position: relative;
                top: -12px;
                background: #fff;
                padding: 0 20px;
            }
            .line-03 {
                width: 600px;
            }
            .line-03 b {
                background: #ddd;
                margin-top: 4px;
                display: inline-block;
                width: 180px;
                height: 1px;
                overflow: hidden;
                vertical-align: middle;
            }
            .line-03 span {
                display: inline-block;
                width: 220px;
                vertical-align: middle;
                text-align: center;
            }
            .line-04 {
                overflow: hidden;
                zoom: 1;
            }
            .line-04 b {
                background: #ddd;
                margin-top: 12px;
                float: left;
                width: 26%;
                height: 1px;
                overflow: hidden;
            }
            .line-04 span {
                padding: 0 10px;
                width: 32%;
                float: left;
                text-align: center;
            }
            .line-05 {
                letter-spacing: -1px;
                color: #ddd;
            }
            .line-05 span {
                letter-spacing: 0;
                color: #222;
                margin: 0 20px;
            }

        </style>
    </head>
    <body>
        <div class="demo-container demo">
            <div class="line-01">小小分隔线 单标签实现</div><br/>
            <div class="line-02">
                <span>小小分隔线 巧用色实现</span>
            </div><br/>
            <div class="line-03">
                <b></b>
                <span>小小分隔线 inline-block实现</span>
                <b></b>
            </div><br/>
            <div class="line-04">
                <b></b>
                <span>小小分隔线 浮动来实现</span>
                <b></b>
            </div><br/>
            <div class="line-05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
        </div>
    </body>
</html>
posted on 2017-08-12 19:33 晏过留痕阅读(1657) 评论(0) 编辑收藏举报