javascript - 如何将 inset box-shadow 添加到 mapbox-div？

Question

我正在尝试向 Bootstrap3 网站中的 mapbox-div 添加 inset box-shadow。问题是当页面加载时阴影显示 1 秒，然后消失在 map 后面。

知道如何将阴影推到前面吗？

这是我的CSS:

#section1-wrapper {

    position:relative;
    height: 400px;  
}

#section1-container {

    background-color:black;
    background: rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);

    margin-top: 50px;

    color: #fff;
    height: 300px;
    position:relative;
    z-index: 1;
}

#map { 
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width:100%;
    z-index:0;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

HTML:

<!-- Section1 -->

    <div class="row" id="section1-wrapper">    

        <div id="map"></div> 

        <div class="container" id="section1-container">

            <div class="col-xs-12 col-sm-12 col-md-12">

                <br />
                <br />

                <h1 class="text-center">Ipsum Lorum. <br /><br /> Ipsum Lorum.</h1>

                <br />
                <br />

            </div>

            <div class="row text-center">

                <div class="col-xs-12 col-md-4">
                    <address>
                        <strong><abbr title="Telefono">T:</abbr> 777777777</strong
                    </address>
                </div>
                <div class="col-xs-12 col-md-4">
                    <address>
                        <strong><abbr title="Mail">M:</abbr> <a href="mailto:#">info@eample.com</a></strong
                    </address>
                </div>
                <div class="col-xs-12 col-md-4">
                <address>
                        <strong><abbr title="Dirrecion">D:</abbr> any street</strong
                    </address>
                </div>


                <br />
                <br />
                <br />
                <br />

            </div>
        </div>

    <!-- Section1 End -->
    </div>

JavaScript:

<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>

     <script>
        var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
        scrollWheelZoom: false,
        zoomControl: false})
        .setView([40, -74.50], 9);

    </script>

Answer 1

将阴影添加到 :before 伪元素或空 div。对于万无一失的 z-index，您还可以将 map 包装在一个额外的 div 中。

#map {
   position: relative;
   z-index: 0;
}

#map > .map-wrapper {
    position: relative;
    z-index: 5;
}

#map:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    pointer-events: none;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

这使用 pointer-events: none; 这意味着它不会在 IE11 以下工作。但是确实没有办法以不会阻止点击事件的方式将一个元素添加到另一个元素之上。您可以将阴影分成四个不同的容器，并将它们分别放在顶部、左侧、右侧和底部。但是阴影下的区域在没有 pointer-events none 的情况下仍然无法点击。

您可以使用像 Modernizr 这样的库检查功能，然后只添加阴影。但是为此添加另一个库有点过分。