Как удалить тень сверху?

Question

тоесть оставить её со всех сторон, кроме вверха

div {
  width: 200px;
  height: 200px;

  box-shadow: 0 0 30px -5px rgb(0 0 0 / 20%);
}



body {
  padding: 50px;
}

<div></div>

Answer 1

Для того, чтобы не смещать тень, а изменить форму относительно исходного блока, используйте псевдоэлемент с нужными размерами и задавайте тень через него:

body { padding: 50px; }

div {
  position: relative;
  height: 200px; width: 200px;
  background-color: #fff;
}
div::before {
  content: '';
  position: absolute;
  top: 30px; bottom: 0;
  z-index: -1; width: 100%;
  box-shadow: 0 0 30px -5px rgb(0 0 0 / 20%);
}

<div></div>

БЛОГ НА HUSL

Как удалить тень сверху?

Ответы (1 шт):