Этот элемент ввода имеет тень:
.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>
Почему это так?
Да, это работает; если вы хотите превратить свой комментарий в ответ, я приму его.
Ваш код работает нормально, потому что фон прозрачен, попробуйте задать цвет фона для 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>
Ваш код работает нормально, это из-за того, что фон прозрачен, попробуйте задать цвет фона для div, и тень будет видна