Применение маски к box-shadow

190
04 июля 2022, 11:40

У меня есть 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.

Answer 1

Вам нужна 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.

READ ALSO
Прошу оценить вёрстку [закрыт]

Прошу оценить вёрстку [закрыт]

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку...

245
Не подключается внешний css файл

Не подключается внешний css файл

Пытаюсь начать разрабатывать на nodejs

285
Изменение лого в шапке сайта

Изменение лого в шапке сайта

Есть фиксированная прозрачная шапка, белое лого и менюПри скроле вниз от половины высоты 1 блока, шапка становится белой, а логотип должен...

207
Вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имени

Вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имени

Нужно вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имениПример имени колонок:

370