Css 仅条纹文本阴影效果

Posted 2023-03-15

【中文标题】Css 仅条纹文本阴影效果

【英文标题】：Css only striped text-shadow effect

【发布时间】：2015-02-17 19:50:24

【问题描述】：

有没有一种简洁优雅的方式来实现复古条纹文本阴影效果？

举个例子，我想用 css 重现这样的东西：

我希望条纹的颜色与字体不同。

【问题讨论】：

我怀疑你可以在 css 中轻松做到这一点，SVG 是一种选择吗？

是的，绝对欢迎使用 svg。

@ImagineWebDesign 如果无法通过纯 CSS 实现（更优雅、更高效的解决方案），我有兴趣尝试 SVG。

我一直在尝试找到一种使用 CSS 的方法，但我想出的唯一方法只能在 webkit 浏览器中工作:(

【参考方案1】：

http://jsfiddle.net/kntz6h01/2/

这是我能想到的最接近的，但它只适用于 webkit 浏览器，并且在文本阴影的长度方面不是很可定制。它还需要标签中的属性来复制文本。

基本上它的工作原理是使用-webkit-repeating-linear-gradient 创建条纹背景，使用

屏蔽背景

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

并使用:after 伪元素复制文本并对其应用文本阴影。

它可能不是很有用。

【讨论】：

这就是我要做的，但它只在 webkit 中支持：/

是的，这更像是一个概念证明，展示了 css 是多么的无能......即使它与所有浏览器兼容，我也无法想象有人真正使用它。

如果您想让它看起来更好，请在与正文背景匹配的文本周围添加边框：***.com/questions/2570972/css-font-border