已解决！请参见下面的答案。
我正在建立一个有多个<section>元素的网站，在大多数<section>元素中，我可以正确地将CSS filter: drop-shadow规则应用到给定的<img>元素，方法是在HTML中给它一个id，然后在CSS中指定id，并给它一个类似filter: drop-shadow(0px 0px 5px black);的规则。
然而，在页面上的一个<section>中，当我使用上面的方法对该部分中的图像应用下拉阴影时，下拉阴影应用于包含<div>元素的单个元素，而不是<img>元素本身。
相关部分的HTML为：

<section class="skills" id="skills">
      <h2 class="skill-header">Skills</h2>

      <div class="skills-wrapper">
        <div class="icon-wrapper">
          <img
            src="./assets/memojis/Me-Memoji-wondering-flipped.png"
            alt="Me wondering memoji"
            loading="lazy"
            class="icon icon-card skills-memoji"/>
        </div>
        <div class="icon-wrapper">
          <img
            src="./assets/icons/icons8-html-5.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
        <div class="icon-wrapper">
          <img
            src="assets/icons/icons8-css3.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
      </div>
      <div class="skills-wrapper">
        <div class="icon-wrapper">
          <img
            src="assets/icons/icons8-javascript.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
        <div class="icon-wrapper">
          <img
            src="assets/icons/icons8-bootstrap.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
        <div class="icon-wrapper">
          <img
            src="./assets/memojis/Me-Memoji-thumbs-upping.png"
            alt="Me giving a thumbs up"
            loading="lazy"
            class="icon icon-card skills-memoji"
          />
        </div>
      </div>
    </section>

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规则集中的filter规则以使其活动时，下拉阴影被应用于类.icon-wrapper的包含元素。我正在尝试弄清楚如何将下拉阴影应用于HTML中的实际<img>元素，如CSS中类.skills-memoji所指定的。