蓝色横条.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 表示阴影向内
// 第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)
