Page 167 - css揭秘

color: transparent;
text-shadow: 0 0 .1em white, 0 0 .3em white;
}

不过你要牢记一点，依赖 text-shadow 来实现文字显示的做法无法实
图 5-36 现平稳退化：如果浏览器不支持 text-shadow，那就什么字也看不见了。因
通过隐藏文字、只显示文字投影 此，需要确保只在那些支持 text-shadow 属性的环境中使用上述效果。你
实现的伪模糊效果
也可以换种思路，使用 CSS 滤镜来实现文字的模糊效果：

a {
background: #203;
color: white;
transition: 1s;
}
a:hover {
filter: blur(.1em);
}

支持这种方法的浏览器可能要少一些，但至少在不支持的情况下不会有
任何功能损失。

试一试 play.csssecrets.io/glow

文字凸起效果

另一种在拟物化风格的网站中流行（且被滥用）的效果是文字凸起（伪
3D）效果（参见图 5-37）。这其中的主要思路就是使用一长串累加的投影，
不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强
烈模糊的暗投影，从而模拟完整的立体效果。
图 5-37 图 5-38 中的文字只使用了简单的 CSS 代码来设置样式，我们以它作为
通过多层 text-shadow 实现的文 起点：
字凸起效果
background: #58a;
color: white;

现在给它添加一系列逐渐加深的 text-shadow：

background: #58a;
图 5-38 color: white;
text-shadow: 0 1px hsl(0,0%,85%),
我们的起点 0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%);

在图 5-39 中可以看到，效果已经出来了，但看起来还不够真实。信不
信由你，我们距离图 5-37 所示的最终效果只差最后一步了，那就是在底部

136 第 5 章 字体排印

඀ࠡ JOEC