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

最新推荐文章于 2024-07-25 11:00:17 发布

小火奋进

最新推荐文章于 2024-07-25 11:00:17 发布

阅读量7.1k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序 css

本文链接：https://blog.csdn.net/dwp10000/article/details/123138124

版权

微信小程序专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了如何在微信小程序中使用CSS的box-shadow属性为按钮和TEXT添加阴影效果。通过调整h-shadow、v-shadow、blur和spread等参数，可以定制不同的阴影样式，从而提升用户界面的视觉体验。

摘要由CSDN通过智能技术生成

微信小程序按钮或者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），默认外部阴影；