CSS 多层描边文字效果实现教程：三种方法做出复古游戏风标题

做网站的时候，标题文字想要那种复古游戏风的多重描边效果，用 CSS 的 -webkit-text-stroke 只能做单层，效果总是差强人意。最近看到一篇很好的教程，作者 yuanchuan 分享了一种用纯 CSS 实现多层描边文字效果的方法，效果非常惊艳。

问题在哪

CSS 的 -webkit-text-stroke 属性只能设置单一的描边宽度和颜色，没法像 Photoshop 那样叠多层描边。比如你想做一个”黑边白边再加一层彩色边”的效果，纯 CSS 原生属性做不到。

解决方案

作者用了一个巧妙的思路：利用 CSS 的 text-shadow 和 background-clip 组合来模拟多层描边效果。

方法一：多层 text-shadow

最简单的方式是用多个 text-shadow 叠加：

.multi-stroke {
    color: white;
    text-shadow:
        -2px -2px 0 black,
         2px -2px 0 black,
        -2px  2px 0 black,
         2px  2px 0 black,
        -3px  0   0 black,
         3px  0   0 black,
         0   -3px 0 black,
         0    3px 0 black;
}

这段代码通过 8 个方向的阴影来模拟一圈描边。增加更多层就能做出多层效果。

方法二：伪元素叠加

用 ::before 和 ::after 伪元素创建不同描边大小的文字层：

.stroke-text {
    position: relative;
    color: #ff6b35;
    font-size: 48px;
    font-weight: bold;
}

.stroke-text::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    -webkit-text-stroke: 4px #004e98;
    z-index: -1;
}

.stroke-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    -webkit-text-stroke: 8px #ffd700;
    z-index: -2;
}

HTML 结构：

<span class="stroke-text" data-text="多层描边">多层描边</span>

方法三：SVG + CSS 混合

如果需要更精细的控制，可以用 SVG 的 paint-order 属性：

.svg-stroke {
    font-size: 60px;
    font-weight: 900;
    fill: white;
    stroke: black;
    stroke-width: 3px;
    paint-order: stroke fill;
}

paint-order: stroke fill 让描边画在填充下面，这样文字的填充色不会被描边遮挡。

实际应用示例

复古游戏标题

.game-title {
    font-family: 'Press Start 2P', monospace;
    color: #ff0;
    text-shadow:
        -2px -2px 0 #f00,
         2px -2px 0 #f00,
        -2px  2px 0 #f00,
         2px  2px 0 #f00,
        -4px -4px 0 #000,
         4px -4px 0 #000,
        -4px  4px 0 #000,
         4px  4px 0 #000;
}

这个效果做出的文字有红色内描边和黑色外描边，很适合做游戏风格的标题。

渐变描边

.gradient-stroke {
    background: linear-gradient(45deg, #ff6b35, #f7c948, #2ec4b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(0,0,0,0.3);
}

注意事项

• -webkit-text-stroke 需要浏览器前缀，虽然现在主流浏览器都支持了
• 多层 text-shadow 在移动端可能影响性能，阴影层数不要太多
• 伪元素方案需要在 HTML 里用 data-text 属性重复文字内容
• SVG 方案对中文字体的支持可能需要额外测试

简评

这个 CSS 技巧虽然不算新，但很多人不知道。做网站标题、Logo 文字、Banner 标语的时候，多层描边效果能让文字更突出、更有设计感。三种方法各有适用场景：text-shadow 最简单、伪元素最灵活、SVG 最精确。根据实际需要选择就好。

来源：
Multi-stroke text effect in CSS – yuanchuan