Почему тень работает на входе, но не на элементах div?

Этот элемент ввода имеет тень:

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
}
<input class = "test" />

Но этот элемент div не:

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
}
<div class = "test"> </div>

Почему это так?

🤔 А знаете ли вы, что...
С HTML можно создавать интерактивные элементы, такие как переключатели (чекбоксы и радиокнопки) и ползунки (слайдеры).


59
1

Ответ:

Решено

Ваш код работает нормально, потому что фон прозрачен, попробуйте задать цвет фона для div, и тень будет видна.

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
  background-color:#fff;
}
<div class = "test"></div>