У меня есть div с примененной к нему маской. Я заметил, что я не могу применить box-shadow
к тому же самому div, поэтому я должен переместить тень на wrapper
div.
Проблема в том, что если тень помещается на div тени, маска не применяется к тени.
Как я могу применить маску к div и его тени?
.wrapper {
width: 200px;
height: 200px;
box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle at left bottom,
transparent 30px,
black 31px
) left bottom / 51% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="wrapper">
<div class="b"></div>
</div>
Свободный перевод вопроса Applying mask to box-shadow от участника @alexandernst.
Вам нужна drop-shadow
, а не тень box-shadow:
.wrapper {
width: 200px;
height: 200px;
filter:drop-shadow(17px 13px 7px rgba(0,0,0,0.75));
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle at left bottom,
transparent 30px,
black 31px
) left bottom / 51% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="wrapper">
<div class="b"></div>
</div>
Свободный перевод ответа от участника @Temani Afif.
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку...
Есть фиксированная прозрачная шапка, белое лого и менюПри скроле вниз от половины высоты 1 блока, шапка становится белой, а логотип должен...
Нужно вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имениПример имени колонок: