如何才能在map组件上方为其他组件添加阴影效果而不被map遮盖

Question

本小白最近在练手微信小程序，想仿写一下滴滴的青桔单车小程序的界面，过程中发现了一个细节，难以实现和官方一样的效果，想问问有没有踩过坑类似坑的前辈们能告知如何解决？

具体的坑

• map优先层级最高，会遮盖掉box-shadow做出的阴影

青桔单车的首页

在扫码解锁的按钮上方，跟地图的接合的地方，又一道较浅的阴影，来呈现出立体感。

地图顶部也是一样的

对于这个这效果，我做了以下猜测和尝试

• 给扫码解锁这个view添加box-shadow样式,但是发现添加的样式在开发者工具的模拟器上可行，真机上却会被map组件遮盖掉
• map组件自身向内的上下 box-shadow inset

模拟器能够显示

真机会被遮盖

种种测试都失败了，阴影实际是添加成功的，开发者工具正常显示阴影样式，但是在真机上会被map组件遮盖掉，不知道青桔单车官方是如何规避了map的坑，做出这种效果

Answer 1

你需要用到这个，自己添加一个图片来实现，你说的那种效果都是这样来实现的，，