如何实现文字多层偏移描边？能否用CSS单元素完成？

当然可以！-webkit-text-stroke确实只能生成均匀环绕文字的描边，没办法实现偏移效果，但我们可以用text-shadow来达成需求——它支持同时设置多组阴影参数，每组对应一个偏移方向的描边层，完全不需要额外元素。

举个具体的实现例子，对应你想要的多层偏移效果：

.offset-stroke-text {
  font-size: 72px;
  font-weight: 900;
  color: #ffffff; /* 文字主体颜色 */
  /* 多层偏移阴影模拟描边，顺序从内到外 */
  text-shadow:
    1px 1px 0 #000000,
    -1px 1px 0 #000000,
    1px -1px 0 #000000,
    -1px -1px 0 #000000,
    3px 3px 0 #ff4444,
    -3px 3px 0 #ff4444,
    3px -3px 0 #ff4444,
    -3px -3px 0 #ff4444,
    5px 5px 0 #ffcc00,
    -5px 5px 0 #ffcc00,
    5px -5px 0 #ffcc00,
    -5px -5px 0 #ffcc00;
}

原理说明： #

• 每组text-shadow参数格式是：水平偏移 垂直偏移 模糊半径 颜色，这里把模糊半径设为0，让阴影变成清晰的描边。
• 通过设置不同方向（上下左右）的偏移值，叠加出环绕文字的描边；调整偏移数值可以控制描边的偏移距离，叠加多组不同颜色的阴影就能实现多层效果。
• 文字主体颜色、阴影的层数、颜色、偏移量都能灵活修改，精准匹配你想要的视觉效果。

这种方法兼容性很好，几乎所有现代浏览器都支持text-shadow，完全满足单个元素实现多层偏移描边的需求。

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