在Google地图元素上添加内嵌框阴影 [英] Add inset box-shadow on Google Maps element

问题描述

我愿意为包含Google地图元素的标记添加一些内置框阴影。但是，似乎没有什么发生，可能是因为Google加载了原始元素中的其他div，因此覆盖了生成的box-shadow。

如何实现这个效果？ / p>

这是代码我有：

 < section id = map-container> 
< figure id =map>< / figure> 
< / section> 
 
＃map-container {
 position：relative; 
 float：right; 
 width：700px; 
 background-color：＃F9FAFC; 
 border-top-right-radius：5px; 
 border-bottom-right-radius：5px; 
} 
 
 #map {
 position：relative; 
 height：400px; 
 border-top-right-radius：5px; 
 border-bottom-right-radius：5px; 
 box-shadow：0 1px 0 0＃F6F7FB inset，0 -1px 0 0＃E0E5E1 inset，0 -2px 0 0 #EBEBED inset，0 -3px 0 0＃F4F4F6 inset; 
} 
  

谢谢！

解决方案

想象出来。这里的工作CSS：

 ＃map-container {
 position：relative; 
 float：right; 
 width：700px; 
 border-top-right-radius：5px; 
 border-bottom-right-radius：5px; 
 box-shadow：0 1px 0 0＃F6F7FB inset，0 -1px 0 0＃E0E5E1 inset，0 -2px 0 0 #EBEBED inset，0 -3px 0 0＃F4F4F6 inset; 
} 
 
 #map {
 position：relative; 
 height：400px; 
 border-top-right-radius：5px; 
 border-bottom-right-radius：5px; 
 z-index：-1 
} 
  

I am willing to add some inset box-shadow to a tag that is containing a Google Maps element. However, it seems nothing happens, probably because Google loads some other div's in the original element, hence covering the generated box-shadow.

How can I achieve this effect?

Here's the code I have:

<section id="map-container">
    <figure id="map"></figure>
</section>

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    background-color: #F9FAFC;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

Thank you!

解决方案

Figured it out. Here the working CSS:

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: -1
}

这篇关于在Google地图元素上添加内嵌框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！