鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 如何才能在map組件上方為其他組件添加陰影效果而不被map遮蓋

如何才能在map組件上方為其他組件添加陰影效果而不被map遮蓋

本小白最近在練手微信小程序，想仿寫(xiě)一下滴滴的青桔單車(chē)小程序的界面，過(guò)程中發(fā)現(xiàn)了一個(gè)細(xì)節(jié)，難以實(shí)現(xiàn)和官方一樣的效果，想問(wèn)問(wèn)有沒(méi)有踩過(guò)坑類(lèi)似坑的前輩們能告知如何解決？

具體的坑

  • map優(yōu)先層級(jí)最高，會(huì)遮蓋掉box-shadow做出的陰影

青桔單車(chē)的首頁(yè)

圖片描述

在掃碼解鎖的按鈕上方，跟地圖的接合的地方，又一道較淺的陰影，來(lái)呈現(xiàn)出立體感。
圖片描述

地圖頂部也是一樣的

對(duì)于這個(gè)這效果，我做了以下猜測(cè)和嘗試

  • 給掃碼解鎖這個(gè)view添加box-shadow樣式,但是發(fā)現(xiàn)添加的樣式在開(kāi)發(fā)者工具的模擬器上可行，真機(jī)上卻會(huì)被map組件遮蓋掉
  • map組件自身向內(nèi)的上下 box-shadow inset

圖片描述

模擬器能夠顯示
圖片描述

真機(jī)會(huì)被遮蓋

種種測(cè)試都失敗了，陰影實(shí)際是添加成功的，開(kāi)發(fā)者工具正常顯示陰影樣式，但是在真機(jī)上會(huì)被map組件遮蓋掉，不知道青桔單車(chē)官方是如何規(guī)避了map的坑，做出這種效果

回答
編輯回答
悶油瓶

圖片描述

你需要用到這個(gè)，自己添加一個(gè)圖片來(lái)實(shí)現(xiàn)，你說(shuō)的那種效果都是這樣來(lái)實(shí)現(xiàn)的，，

2017年5月1日 19:12