藍(lán)色橫條.jpg

這個效果用border-bottom做不出來，因為會超出padding-box,使用box-shadow屬性來做很簡單：

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

// sass
.box
  width: 50px
  height: 50px
  background-color: #222
  box-shadow: 0px -4px 0px #0097A7 inset
  // -4px 表示向上移動4px
  // inset 表示陰影向內(nèi)
  // 第2個 0px 表示 不虛化

做出陰影效果

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

// sass
.box
  width: 260px
  height: 50px
  background-color: #c57139
  box-shadow: 0px 20px 40px -30px rgba(0, 0, 0, 0.6)