如何仅用纯CSS实现斑马线效果的投影文字样式？

本文共计799个文字，预计阅读时间需要4分钟。

效果展示+思路分析分层：+ 表面一层：黑色文字+ 中间一层：白色文字+ 最底层：条纹状黑色文字多层级文字，首先实现文字投

效果展示

思路分析 层级思路

从展示的效果可以猜到这个效果由3层文字组成。

• 表面一层黑色文字
• 中间一层白色文字
• 最低的一层是斑马条纹文字

要实现多层文字，我首先想到的是文字投影 text-shadow ，但通常 text-shadow 只能投个纯色出来。

于是思路要改一下，黑色和白色层是投影，斑马条纹是真正的文字本身。

斑马纹思路

看到这种条纹效果，我想到了背景图渐变。

1. 直接使用图片实现斑马纹路
2. 使用 background-image 里的线性渐变 linear-gradient

第一种思路不推荐，因为作为一个有追求的前端能不使用图片就尽量别使用图片！

渐变纹路的想法确定后，就可以使用 background-clip: text 规定背景图案渲染到文本中。

这个方法经常用来做文字特效。

要将背景渲染到文本中还需要把文字原本的颜色设置成透明，这样才能把背景图案显示出来。