Как добавить вставки box-shadow в mapbox-div?

Question

Я пытаюсь добавить вложенную коробку-тень к карте-div на сайте Bootstrap3. Проблема в том, что тень появляется в течение 1 секунды, когда страница загружается, а затем исчезает за картой.

Любая идея, как нажимать тень на фронт?

Вот мой 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-индекса вы также можете обернуть карту в дополнительный 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. Но нет никакого способа добавить элемент выше другого таким образом, чтобы не блокировать события щелчка. Вы можете разделить тень в четырех разных контейнерах и поместить их сверху, влево, вправо и снизу. Но область под тенью по-прежнему будет без кликабеля без указателей-событий.

Вы можете использовать такую ​​библиотеку, как Modernizr, чтобы проверить функциональность и добавить только тень. Но немного лишнее добавить другую библиотеку только для этого.

Answer 2

это не самое лучшее решение, но работал для меня

установить врезку тень на карте

document.getElementById ('карта'). ChildNodes [0] .childNodes [0] [2 .childNodes ] .style.boxShadow = 'inset 0 0 150px # 000000';

во всем браузере google map API генерировать карту div выше способом