新需求需要绘制一个带有阴影的按钮,如下图所示
主要采用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手册