如何用CSS实现清晰粗文本描边 解决菜单文本遮罩效果的描边痛点

完全不需要堆叠多层text-shadow，有两种更简洁、描边效果更扎实的实现方式，且完全适配你现有的遮罩hover交互逻辑，不需要改动原有动画结构。

方案1：使用原生CSS文本描边属性（推荐） #

text-stroke是浏览器专门为文本轮廓绘制设计的属性，输出为矢量级锐利效果，无模糊感，代码极简：

• 核心用法：给需要描边的元素直接设置描边宽度、颜色即可
• 兼容说明：主流现代浏览器均已支持，生产环境可同时带上-webkit-前缀覆盖Safari、旧版Chromium内核浏览器
• 额外优化：搭配paint-order: stroke fill可调整绘制顺序，避免描边向内覆盖文字填充区域

直接替换你现有.outlineMask span的描边代码即可：

.outlineMask span{ 
  /* 原有位置、尺寸、字体、过渡等样式全部保留 */
  color:#fff; /* 若需要空心描边效果，改为 color: transparent 即可 */
  /* 替换原有的堆叠text-shadow */
  -webkit-text-stroke: 1px hotpink;
  text-stroke: 1px hotpink;
  paint-order: stroke fill;
}

方案2：兼容老旧环境的硬边text-shadow写法 #

如果需要支持不兼容text-stroke的极老浏览器，不需要堆叠同位置的模糊shadow，用多方向偏移的零模糊shadow即可实现硬描边：

• 原理：分别给文本上下左右（必要时补充四个斜向）施加等于描边宽度的偏移、零模糊值的shadow，自然形成均匀硬边轮廓
• 1px描边示例：

text-shadow: 
  1px 0 0 hotpink,
  -1px 0 0 hotpink,
  0 1px 0 hotpink,
  0 -1px 0 hotpink;

• 如果需要2px及以上的粗描边，补充四个斜向的偏移值即可，不需要反复堆叠同个shadow值：

/* 2px均匀硬描边示例 */
text-shadow:
  1px 0 0 hotpink, -1px 0 0 hotpink,
  0 1px 0 hotpink, 0 -1px 0 hotpink,
  1px 1px 0 hotpink, -1px -1px 0 hotpink,
  1px -1px 0 hotpink, -1px 1px 0 hotpink;

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