Этот элемент ввода имеет тень:
.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 можно создавать интерактивные элементы, такие как переключатели (чекбоксы и радиокнопки) и ползунки (слайдеры).
Ваш код работает нормально, потому что фон прозрачен, попробуйте задать цвет фона для 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>