css to achieve hollow text effect

In daily development, you are likely to encounter the need to manually implement hollow text effects.

Implementation method one (hollow font)

<style>
.text{
  -webkit-text-stroke: 1px black; // 根据需求不同改变颜色
  -webkit-text-fill-color : transparent;
  font-size: 30px;
  color:#fff;
}
</style>
<div class="text">空心字/缕空效果</div>
</body>

In addition to using -webkit-text-stroke and -webkit-text-fill-color, we can also take advantage of text-shadow.

<style>
.text{
  text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
  font-size: 30px;
  color:#fff; // 根据需求不同改变颜色
}
</style>
<div class="text">空心字/缕空效果</div>

Implementation method two (three-dimensional hollow luminous font)

<style>
.light{
    font-size: 30px;
    color: #fff;
    text-shadow: 0 0 5px #10f701, 0 0 10px #727272;
}
</style>
<div class="light">空心发光文字效果</div>

Implementation method three (color gradient text)

<style>
.color-text{
    font-size: 30px;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
}
</style>
<span class="color-text">彩色渐变文字效果</span>