其實(shí)之前已經(jīng)分享過(guò)一篇，用純CSS方式實(shí)現(xiàn)三橫線（三道杠）的方法：

CSS小技巧:border-style:double制作三橫線

具體代碼：

{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}

可能比本文實(shí)現(xiàn)的還簡(jiǎn)單，但既然學(xué)習(xí)到了padding實(shí)現(xiàn)三橫線，那就看看padding是如何來(lái)實(shí)現(xiàn)的吧！

如上圖實(shí)現(xiàn)的代碼如下：

<style>
 .box{
  width: 150px;height: 30px;
  border-top: 30px solid;//上邊框
  border-bottom: 30px solid;//下邊框
  padding: 30px 0;//中間撐開(kāi)兩個(gè)透明區(qū)域
  background-color:currentColor;//當(dāng)前的標(biāo)簽所繼承的文字顏色，也可自定義顏色值
//關(guān)于currentColor說(shuō)明，詳去大神網(wǎng)站去看：http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/
  background-clip: content-box;
//這句話是只讓背景色在內(nèi)容區(qū)域顯示，padding不算內(nèi)容區(qū)了，就不會(huì)讓padding那上下30px變色，就制作成了三橫線！
 }
</style>
<div class="box"></div>

是不是很簡(jiǎn)單？