本文将探索禁用两行 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>

效果如下：

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 属性时有几个注意的点：

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