如何实现指定filter: drop-shadow阴影并融入目标CSS代码？

一、能否用filter: drop-shadow实现示例中的阴影效果？ #

可以实现。示例中通过给包含白色条纹的圆形容器添加filter: drop-shadow(0 0 20px #F29)，让每个白色条纹边缘产生粉色阴影，再配合容器的overflow: hidden将超出圆形的部分裁剪，最后通过渐变遮罩层的mix-blend-mode: multiply将白色条纹渲染成渐变色彩，最终得到目标效果。

示例代码如下：

CSS #

body {
  height: 100vh;
  overflow: hidden;
}

figure {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stripes-wraper {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px #F29);
  overflow: hidden;
  position: absolute;
}

.stripe {
  width: 100%;
  height: 15px;
  background-color: #FFF;
}

.stripe + .stripe {
  margin-top: 15px;
}

.gradient-mask {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #92F 0%, #F29 100%);
  mix-blend-mode: multiply;
  position: absolute;
}

HTML #

<figure>
  <div class="stripes-wraper">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="gradient-mask"></div>
</figure>

二、如何将该阴影效果融入目标代码？ #

你之前的目标代码未能成功实现效果，原因是drop-shadow作用于整个圆形元素的不透明区域（而非条纹边缘），因为你的背景叠加方式让整个圆形区域都有颜色覆盖。要复刻示例的阴影效果，需要让drop-shadow作用于条纹的边缘，同时保留渐变色彩，调整方案如下：

修改后的目标代码 #

HTML

<div class="sun">
  <div class="sun-stripes"></div>
</div>

CSS

body {
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  width: 50%;
  max-width: 450px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px #f29);
  overflow: hidden;
  position: relative;
}

.sun-stripes {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  background-size: 100% 8.4%;
}

.sun::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #92f 0%, #f29 100%);
  mix-blend-mode: multiply;
}

调整说明 #

1. 将原单一的.sun元素拆分为容器和条纹层，让drop-shadow作用于容器，容器的overflow: hidden裁剪出圆形轮廓；
2. 条纹层使用白色与透明交替的渐变，确保drop-shadow仅识别白色条纹的边缘生成阴影；
3. 通过容器的伪元素添加渐变遮罩，利用mix-blend-mode: multiply将白色条纹渲染成渐变色彩，与示例效果一致。

内容的提问来源于stack exchange，提问作者Mary Evelyn