使用box-shadow制作内下划线和阴影

蓝色横条.jpg

这个效果用border-bottom做不出来，因为会超出padding-box,使用box-shadow属性来做很简单：

// html


// sass
.box
  width: 50px
  height: 50px
  background-color: #222
  box-shadow: 0px -4px 0px #0097A7 inset
  // -4px 表示向上移动4px
  // inset 表示阴影向内
  // 第2个 0px 表示 不虚化

---

做出阴影效果

// html


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