Как сделать border-radius у filter: drop-shadow?
Подскажите почему карточки перекрывают border-radius у всего блока где они находятся и как такое можно исправить? Спасибо
snippet
Дополнительно:
.column { border-bottom-right-radius: 10px; }
вот только с верхним левым не прокатит, там можно использовать svg, и у .body border-radius бесполезен
Подскажите почему карточки перекрывают border-radius у всего блока где они находятся и как такое можно исправить?
В смысле почему? Потому что они не имеют своего border-radius.
Если зададите overflow: hidden, то обрежутся.
Ну и последнему border-bottom-right-radius: 10px;
Удобнее через кастомное свойство, чтобы один раз менять скругление.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для установки border-radius у filter: drop-shadow вы можете использовать следующий трюк: вместо того, чтобы применять filter: drop-shadow напрямую к элементу, создайте дополнительный контейнер, в котором будет применен border-radius, и примените filter: drop-shadow к его содержимому.
Например, если у вас есть следующая разметка:
<div class="container"> <img src="example.jpg" alt="Example"> </div>
И следующие стили:
.container { border-radius: 10px; overflow: hidden; } .container img { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); }
В этом примере filter: drop-shadow применен к изображению внутри контейнера с border-radius. Таким образом, тень будет отображаться с учетом border-radius контейнера.
Если вы хотите применить filter: drop-shadow напрямую к элементу с border-radius, то к сожалению, это не поддерживается стандартными CSS-свойствами. В таком случае, вам придется использовать другие методы, например, использовать изображение с тенью вместо filter: drop-shadow или использовать JavaScript для создания тени программно.