本文将探索禁用两行 CSS 实现笔墨镂空效果。

1.镂空效果

镂空效果紧张利用了 color: transparent 和 -webkit-text-stroke 来实现，详细看 demo 代码。
tips: 本 demo 中样式利用了原生 CSS 嵌套。
在本例中默认展现的是镂空效果，当鼠标 hover 过后，显示了颜色添补效果。

<style> .container { display: flex; height: 100vh; justify-content: center; align-items: center; & a { display: block; font-size: 60px; text-decoration: none; color: transparent; -webkit-text-stroke: 2px #000; text-stroke: 2px #000; &:hover { color: #000; } } }</style><div class="container"> <a href="http://www.tencent.com" title="FED实验室"> <span>FED实验室</span> </a></div>

效果如下：

html按钮文字两行现代CSS仅用两行 CSS 实现文字镂空后果 Java

2.text-stroke 先容

WebKit 现在通过 CSS 支持对文本进行描边。
在当前的网页中，为笔墨绘制的字形总是由颜色CSS属性指定的单一颜色添补。
有时作者可能希望用一种颜色描述字形的边缘，并用另一种颜色添补。
通过只描边笔墨而不添补内部，可以实现轮廓效果。

Webkit 引入了四个新的 CSS 属性来支持笔墨描边：

text-fill-color：该属性许可您为笔墨指定添补颜色。
如果未设置，将利用color属性进行添补。
text-stroke-color：该属性许可您为笔墨指定描边颜色。
如果未设置，将利用color属性进行描边。
text-stroke-width：该属性许可您指定描边的宽度。
默认为0，表示仅实行添补。
您可以为此值指定一个长度，并且可以利用thin、medium和thick的值（'thin'最靠近OS X的轮廓行为）。
text-stroke：该属性是两个描边属性的简写。

从上面属性阐明可以看到，我们实现镂空效果，不一定要把 color 属性设置为 transparent，也可以将 test-fill-color 属性设置为 transparent 来实现。

3.text-stroke 兼容性

text-stroke 的兼容性还不太好，虽然被大多数浏览器所支持，但是仍旧须要利用 webkit 前缀来标识。

利用 text-stroke 属性时有几个把稳的点：

Firefox 和 Edge 浏览器仅支持 -webkit-text-stroke 属性，而不是 -moz- 或者 -ms- 前缀。
在 WebKit 中，文本描边可以利用CSS Transition和 Animation 进行动画处理，但动画只能对描边颜色进行处理，而不能对描边宽度进行处理。