嘿，我太懂你这个糟心的问题了！之前我做类似效果的时候也卡在这里——明明想让阴影跟着描边走，结果它死死粘在文字本身上，怎么调都不对😅

你现在的写法里，text-shadow默认会同时作用于文字的填充和描边部分，哪怕用了paint-order也没法单独给描边分配阴影。解决思路其实很简单：把描边+阴影和文字填充拆成两个独立的层，用伪元素实现分离控制就好！

我给你调整了代码，你可以直接试试：

<div class="mapv2-title">
  <span class="fixstroke" data-text="SOMETEXT">SOMETEXT</span>
</div>

.mapv2-title {
  position: relative; /* 让伪元素能基于这个容器精准定位 */
  font-family: "Poppins", sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
}

.fixstroke {
  color: black; /* 只负责文字本身的填充色 */
  position: relative;
  z-index: 1; /* 让真实文字盖在描边层的上面 */
}

/* 伪元素专门承担描边和阴影的任务 */
.mapv2-title::before {
  content: attr(data-text); /* 从span的data-text里读取内容，方便后续动态修改 */
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: 15px yellow; /* 保留你原来的描边设置 */
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* 给描边加的阴影，参数可以按需调整 */
  z-index: 0; /* 把描边层放在真实文字的下层 */
}

给你拆解下核心逻辑：

• 外层容器设position: relative，确保伪元素能和真实文字完全对齐
• 真实的<span>只负责显示带填充色的文字，通过z-index让它处于最上层
• 用::before伪元素生成和真实文字完全一致的内容，给它加上描边和阴影后，把它放在文字下层

这样一来，阴影就只会跟着描边走，完全不会影响到上面的文字本身！如果要改文字内容，只要同步修改data-text属性和span里的内容就行，要是做动态内容的话，用JS给data-text赋值也超方便。

内容来源于stack exchange