在Google Maps元素上添加内嵌框阴影

Question

我愿意在包含Google Maps元素的标记中添加一些插入框阴影.然而,似乎没有任何反应,可能是因为Google在原始元素中加载了一些其他div,因此覆盖了生成的box-shadow.

我怎样才能达到这个效果？

这是我的代码:

<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;
}

谢谢!

Answer 1

这就是我做到的.以下方法不会与地图控件重叠,因此您可以操作地图,即拖动,单击,缩放等.

HTML:

<div class="map-container">
    <div class="map"></div>
</div>

CSS:

.map-container {
    position: relative;
    overflow: hidden;
}
.map-container:before, .map-container:after, .map:before, .map:after {
    content: '';
    position: absolute;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; }
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; }
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; }
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; }

演示: http ://jsfiddle.net/dkUpN/80/

更新:旧的解决方案(见1 ^日修订)没有伪元素支持,并与旧的浏览器兼容.演示仍然可以在这里找到:http://jsfiddle.net/dkUpN/.

Answer 2

在尝试将嵌入阴影添加到嵌入式地图的一侧时,我遇到了同样的问题.我尝试将它添加到map-canvas元素但没有可见的阴影.不知道这种行为的原因,也许是位置:地图中某些元素的绝对位置.

无论如何,我宁愿选择一个由覆盖在地图上的薄(5px)条带构成的伪元素,而不是在代码中添加其他非语义元素:

这会在左侧添加阴影:

#map-container:before {
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

演示:http://jsfiddle.net/marcoscarfagna/HSwQA/

对于右侧阴影:

#map-container:before {
    box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

Answer 3

弄清楚了。这是工作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
}