Page 166 - css揭秘

}

h1 text {
fill: currentColor;
}

h1 svg { overflow: visible }

h1 use {
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
}

显然这种方案也不够理想，但它的视觉效果确实是最好的（参见图
5-34）；甚至在那些不支持 SVG 的旧版浏览器中，这些文本仍然是可读、
可设置样式的，而且还可以被搜索引擎抓取。

试一试 play.csssecrets.io/stroked-text

文字外发光效果

在某些类型的网站中，文字外发光效果常用于凸显标题，或给链接添加
鼠标悬停效果。它是最容易生成的文字美化效果之一。这种方法有一个最简
单的版本：你只需要准备几层重叠的 text-shadow 即可，不需要考虑偏移
量，颜色也只需跟文字保持一致（参见图 5-35）：

background: #203;
color: #ffc;
text-shadow: 0 0 .1em, 0 0 .3em;

如果是为鼠标悬停状态添加这种效果，加上一个过渡效果就更好了：
图 5-35
a { 使用两层简单的 text-shadow 实
background: #203;
color: white; 现的文字外发光效果
transition: 1s;
}
a:hover {
text-shadow: 0 0 .1em, 0 0 .3em;
}

这个效果还可以做得更炫。如果你在 :hover 状态下把文字本身隐藏掉，
那它看起来真的就像在慢慢变模糊（参见图 5-36）：

a {
background: #203;
color: white;
transition: 1s;
}
a:hover {

27 现实中的文字效果 135

඀ࠡ JOEC