我愿意为包含Google Maps元素的标签添加一些插入框阴影.然而,似乎没有任何事情发生,可能是因为Google在原始元素中加载了一些其他div,因此覆盖了生成的盒子阴影.
如何达到这个效果？
这是我的代码：
<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;
}
谢谢！
解决方法
这就是我做的.以下方法不会与地图控件重叠,因此您可以操纵地图,即拖动,点击,缩放等.
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.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/
更新：旧解决方案(参见1st revision)没有支持伪元素,并且与旧浏览器兼容.演示仍然可以在这里：http://jsfiddle.net/dkUpN/.
