CSS Drop-shadow ошибочно применяется в некоторых местах к контейнеру вместо элемента ⇐ CSS

[Anonymous]

Я создаю веб-сайт, содержащий несколько элементов . В большинстве элементов я могу правильно применить правило CSS filter: drop-shadow к данному элементу

alt="Me wondering memoji"
loading="lazy"
class="icon icon-card skills-memoji"/>



alt=""
loading="lazy"
class="icon icon-card"
/>


alt=""
loading="lazy"
class="icon icon-card"
/>





alt=""
loading="lazy"
class="icon icon-card"
/>


alt=""
loading="lazy"
class="icon icon-card"
/>


alt="Me giving a thumbs up"
loading="lazy"
class="icon icon-card skills-memoji"
/>




CSS:

Код: Выделить всё

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
background-color: var(--color-background);
/* background-image: url("./background.svg"); */
background-repeat: no-repeat;
background-size: cover;
color: var(--color-text);
text-shadow: var(--text-shadow);
}

.skills {
align-items: center;
margin: var(--margin-section-standard);
max-width: var(--section-max-width);
width: var(--section-width);
background-color: var(--color-section);
border-radius: var(--border-radius-right-trapezoid-large);
padding: var(--padding-section-standard);
border: var(--border);
box-shadow: var(--box-shadow);
scroll-margin-block-start: var(--scroll-margin-block-start);
}

.skills h2 {
margin-bottom: var(--bottom-margin-1);
text-align: center;
}

.skills div {
line-height: var(--line-height);
padding: 0.4rem;
text-align: center;
}

.skills .skills-wrapper {
width: 100%;
}

.icon-wrapper {
display: inline-grid;
width: 20%;
justify-content: center;
margin: 1rem;
}

.icon {
filter: var(--drop-shadow-image);
}

.icon-card {
background-color: var(--color-background);
border-radius: var(--border-radius-right-trapezoid-small);
box-shadow: var(--box-shadow);
padding: 1rem;
/* margin: 10px; */
width: 12rem;
border: var(--border);
}

.skills-memoji {
/* filter: var(--drop-shadow-image); */
}

Когда я отменяю комментарий к правилу фильтра в наборе правил .skills-memoji, чтобы сделать его активным, тень применяется к содержащемуся элемент класса .icon-wrapper. Я пытаюсь выяснить, как заставить тень применяться к фактическим элементам в HTML, как указано в CSS их классом .skills-memoji.


Подробнее здесь: https://stackoverflow.com/questions/753 ... stead-of-t