Как вернуть тень?

Question

[vasIvas]

Нашел в гугле пример тени, сделал её - работает, но только в том случаи, если у main-container не задано свойство backgroud.
Вопрос первый - как заставить тень появится?
Вопрос второй - как заставить тень появится не изменяя код самой тени?
Вопрос третий - у кого будет правильнее изменить код чтобы тень появилась?
Вот пример на jsfiddle, ниже код (закоментируйте у .main-container свойство background и нужная тень появится)-

<div class="main-container">
    <div class="container dropshadow"></div>
</div>

.main-container {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
}

.container {
  width: 200px;
  height: 70%;
  margin: 0 auto;
}

.dropshadow {
  position: relative;
  padding: 1em;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.dropshadow::before, .dropshadow::after {
  content: "";
  position: absolute !important;
  z-index: -2;
}
.dropshadow::before {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  border-radius: 10px/100px;
}

Answer 1

[ixon]

Дело в том, что ваш класс dropshadow содержит свойство z-index равное -2, определяющее его позицию ниже, чем main-container, позиция которого по умолчанию равна 0. Фон рисуется выше, чем тень и как бы перекрывает её. Чтобы исправить это, следует добавить к main-container, z-index меньше, чем у dropshadow и добавить position равное, absolute, чтобы применить dropshadow.
https://jsfiddle.net/h73x5syv/7/
Вот переписанный .main-container

.main-container {
  width: 100vw;
  height: 100vh;
  background:#00ffff;
  z-index:-5;
  position:absolute;
}

Comments

[vasIvas]

Что-то Вы вроде ерунду несете... Вы говорите что темный цвет плохо смотрится на белом цветете, в то время как с отключенным bg фон продолжает быть белым?

[ixon]

vasIvas: и при наличии свойства background у класса main-container и при его отсутствии лично я наблюдаю тень.

[vasIvas]

ixon: значит Вы вообще не в теме..

[ixon]

vasIvas: так введите меня в тему.

[ixon]

vasIvas: переписал ответ.