微信小程序开发如何实现阴影/悬浮效果

最新推荐文章于 2024-08-21 11:13:39 发布

句号（在IT行业摸爬滚打）

最新推荐文章于 2024-08-21 11:13:39 发布

阅读量1.3k

点赞数 3

分类专栏：微信小程序初学者进阶联盟文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/tl437002770/article/details/135854300

版权

微信小程序初学者进阶联盟专栏收录该内容

36 篇文章 19 订阅 ¥9.90 ¥99.00

订阅专栏

本文介绍了在微信小程序中创建阴影和悬浮效果的方法，通过关键代码`position: fixed;`和`box-shadow: 0 0 10px darkgray;`实现组件的悬浮及阴影效果。

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

显示：

实现：

<view style="width: 100%;height: 500rpx; display: flex; justify-content:space-evenly;align-items: center; ">
  <view style="width: 200rpx;height:100rpx;background-color: aqua; display: flex; align-items: center; justify-content: center;box-shadow: 0 0 10px darkgray">元素1</view>
  <view style="width: 200rpx;height:100rpx; background-color:yellow; display: flex; align-items: center; justify-content: center;">元素2</view>
</view>

关键代码：center;box-shadow: 0 0 10px darkgray