CSS巧妙實現分隔線的幾種方法

時間 2020-05-09

標籤 css 巧妙實現分隔幾種方法欄目 CSS 简体版

原文原文鏈接

原文地址：http://www.daqianduan.com/4258.htmlcss

前幾天一@同事看新浪微博裏有個相似分隔線的提示，就本身試了幾種方法來實現這個分隔線。下面就是簡單實現分隔線的幾種方法，我的比較喜歡第二種，我也給出了最後第五種比較2的寫法，請你們拍磚，或者提供其餘好的方法。html

單個標籤實現分隔線：

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

優勢：代碼簡潔spa

巧用背景色實現分隔線：

點此查看實例展現3d

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}

優勢：代碼簡潔，可自適應寬度code

inline-block實現分隔線：

點此查看實例展現htm

.demo_line_03{
    width:600px;
}
.demo_line_03 b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.demo_line_03 span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
}

優勢：文字可多行blog

浮動實現分隔線：

點此查看實例展現ci

.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

優勢：NUNget

利用字符實現分隔線：

點此查看實例展現

<div class="demo_line_05">———————————<span>小小分隔線 字符來實現</span>————————————</div>

.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

優勢：代碼簡潔以上簡單介紹了分隔線的寫法，也許還有其它比較合適的寫法，看環境各取所需吧！

<html><head>
<meta charset="UTF-8">
<title>實例: CSS巧妙實現分隔線的幾種方法 -- 大前端</title>
</head>
<body>

<h1 class="demo-title">實例: CSS巧妙實現分隔線的幾種方法 -- 大前端</h1>
<div class="demo-header">
   « CSS巧妙實現分隔線的幾種方法
</div>

<div class="demo-container demo">
<style type="text/css">
.demo{
    width: 600px;
}
.line_01{
    padding: 0 20px 0;
    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{
    width:600px;
}
.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>

<div class="line_01">小小分隔線 單標籤實現</div>
<br>
<br>
<div class="line_02"><span>小小分隔線 巧用色實現</span></div>
<br>
<br>
<div class="line_03"><b></b><span>小小分隔線 inline-block實現</span><b></b></div>
<br>
<br>
<div class="line_04"><b></b><span>小小分隔線 浮動來實現</span><b></b></div>
<br>
<br>
<div class="line_05">———————————<span>小小分隔線 字符來實現</span>————————————</div>
<br>
<br>
</div>

</body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。