如圖： 實現四個橫只需利用border特性的double值即可。

<div class="container">
  <div class="box"></div>
</div>

css為

.container {
  padding: 4px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px #ccc;
  display: inline-block;
}

先鋪墊一下， 主要在class為box上實現。

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

我們將box設定為20px高， 上下border都設定為60px的double即可。 如下圖：