css的box-shadow属性创建带阴影按钮

---

新需求需要绘制一个带有阴影的按钮，如下图所示

主要采用box-shadow属性，代码如下

<div class="zfbotton-div">
    <button class="zfbotton">支付</button>
</div>

.zfbotton-div {
  position: absolute;
  top: 75%;
  height: 1rem;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.zfbotton {
  display: inline-block;
  width: 40%;
  height: auto;
  line-height: 1.13333rem;
  text-align: center;
  color: #fff;
  font-size: 0.4rem;
  border: none;
  border-radius: 1rem;
  background: #189b25;
  box-shadow: 0 0.2rem 0.5rem #189b25;  //主要通过该属性设置
}

css手册