Box-shadow перекрывает другой div вокруг div сверху / вниз / влево / вниз к нему?

Question

Я знаю, что на этот вопрос есть много вопросов и ответов, но я думаю, что это не так, как у меня. Ничего не помогло, и я попытался много.

Вот мой код, и у меня есть JSFiddle ниже , пожалуйста, проверьте его!

<style>
        #container {
            display: flex;
            flex-wrap: wrap;
            margin-top:100px;
            margin-bottom:100px;
        }
         .homeTiles {
           height:266px;width:100%;
           overflow:auto;
           background:yellow;
      }
        .image1 {
            box-shadow: -6px -6px 22px 6px grey;
    }
        .image2 {
            box-shadow: 6px 6px 22px 6px grey;
        }
        .image3 {
            box-shadow: -6px 6px 22px 6px grey;
        }
        .image4 {
            box-shadow: 6px 6px 22px 6px grey;
        }

        .homeTextTile1 {
            box-shadow: 6px -6px 22px 6px grey;
        }
        .homeTextTile2 {
            box-shadow: -6px 6px 22px 6px grey;
        }
        .homeTextTile3 {
            box-shadow: 6px 6px 22px 6px grey;
        }
        .homeTextTile4 {
            box-shadow: -6px 6px 22px 6px grey;
        }
</style>

<div id='container'>
<div class="col-md-6 homeTiles image1"></div>
     <div class="col-md-6 homeTiles homeTextTile1">
     </div>
     <div class="col-md-6 homeTiles homeTextTile2">
</div>
         <div class="col-md-6 homeTiles image2"></div>
         <div class="col-md-6 homeTiles image3"></div>
             <div class="col-md-6 homeTiles homeTextTile3">
            </div>
             <div class="col-md-6 homeTiles homeTextTile4">
         </div>
                 <div class="col-md-6 homeTiles image4"></div>
             </div>

Я изменил .homeTiles {width:100%;} на .homeTiles {width:50%;} потому что квадрат вывода JsFiddle маленький. Теперь вы можете ясно видеть, как это выглядит для меня. Как я уже сказал, я не хочу теней внутри div'ов (см. JsFiddle, тогда вы поймете, что я имею в виду). Мне нужны тени только снаружи каждого элемента div (как это уже есть, но я хочу, чтобы они были минус внутренние тени элемента div).

https://jsfiddle.net/rhpskcu3/

Спасибо!

Answer 1

Теперь, если я понимаю, что вы пытаетесь сделать ...

Ваш HTML должен выглядеть следующим образом:

<div id='container'>
    <div class="col-md-6 homeTiles image1"></div>
    <div class="col-md-6 homeTiles homeTextTile1"></div>
    <div class="col-md-6 homeTiles homeTextTile2"></div>
    <div class="col-md-6 homeTiles image2"></div>
    <div class="col-md-6 homeTiles image3"></div>
    <div class="col-md-6 homeTiles homeTextTile3"></div>
    <div class="col-md-6 homeTiles homeTextTile4"></div>
    <div class="col-md-6 homeTiles image4"></div>
</div>

По сути, я не вижу ничего плохого в вашем HTML, кроме форматирования.

Тогда ваш CSS, то есть то, что вы используете для теней, должен выглядеть следующим образом:

#container {
     display: flex;
     flex-wrap: wrap;
     margin-top:100px;
     margin-bottom:100px;
}
 .homeTiles {
     height:266px;
    width:50%;
     overflow:auto;
     background:yellow;
}
 .image1 {
     box-shadow: 0 0 grey;
}
 .image2 {
     box-shadow: 0 0 grey;
}
 .image3 {
     box-shadow: 0 0 grey;
}
 .image4 {
     box-shadow: 0 0 grey;
}
 .homeTextTile1 {
     box-shadow: 0 0 grey;
}
 .homeTextTile2 {
     box-shadow: 0 0 grey;
}
 .homeTextTile3 {
     box-shadow: 0 0 grey;
}
 .homeTextTile4 {
     box-shadow: 0 0 grey;
}

Теперь вы должны посмотреть в каждом поле и определите, как вы хотите, чтобы тень получалась в терминах длины.

Свойство box-shadow в CSS имеет синтаксис значений "x" и "y". Как вы можете видеть здесь . Тем не менее, вы можете добавить размер свойства shadow and blur, добавив еще два набора чисел.

Так и будет: box-shadow: x-value y-value blur-radius spread-radius shadow-color; box-shadow: 6px 10px 12px 15px grey

Так что, если я так смотрю при правильном коде ваш CSS должен быть:

#container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-bottom: 100px;
}

.homeTiles {
  height: 266px;
  width: 50%;
  overflow: auto;
  background: yellow;
}

.image1 {
  box-shadow: -6px -10px grey;
}

.image2 {
  box-shadow: 6px 0 grey;

}

.image3 {
  box-shadow: -6px 0 grey;
}

.image4 {
  box-shadow: 6px 10px grey;
}

.homeTextTile1 {
  box-shadow: 6px -10px grey;
}

.homeTextTile2 {
  box-shadow: -6px 0 grey;
}

.homeTextTile3 {
  box-shadow: 6px 0 grey;
}

.homeTextTile4 {
  box-shadow: -6px 10px grey;
}

Но если вы хотите, чтобы все тени пересекались и не пересекались с каждым из полей, было бы лучше назначить тень родительскому элементу , Как показано ниже:

.container {
  box-shadow: -6px 10px grey;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-bottom: 100px;
}

.homeTiles {
  height: 266px;
  width: 50%;
  overflow: auto;
  background: yellow;
}

Вам просто нужно продолжить настройку, пока не получите то, что вы хотите. Тем не менее, вы можете использовать онлайн-инструменты, такие как этот , чтобы помочь вам с этим.