微信小程序 按钮添加阴影效果实现立体悬浮感

微信小程序 按钮或者TEXT实现阴影效果

效果图：

WXML中的设定

 <view class="btcls">
      <button class="funcbt" type="primary" style="width: 40%;">设备检测</button>
      <button class="funcbt" type="primary" style="width: 40%;">主控界面</button>
 </view> 

WXSS中的设定代码：

.btcls{
  display: flex;
  margin-top:80rpx; //具体上方控件的距离 
}
.funcbt{
  border-radius: 80rpx;  //设置倒角
  line-height: 80rpx; //内容的高度
  box-shadow: 5rpx 5rpx 5rpx 5rpx gray;
}

本文中采用CSS中的box-shadow属性
语法：

box-shadow: h-shadow v-shadow blur spread color inset;

参数介绍：

h-shadow： 必需的，水平阴影的位置，可以为负值；
v-shadow：必需的，垂直阴影的位置，可以为负值；
blur：可选，模糊的距离；
spread：可选，阴影的大小；
color：可选，阴影的颜色,可以直接选择自带的色彩效果；
inset：可选，外部阴影（outset）或者内部阴影（inset），默认外部阴影；

【好文共赏析！】