css实现空心文字效果

在日常开发中大家很有可能会遇到需要手动实现空心文字效果

实现方式一 （空心字体）

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

除了使用-webkit-text-stroke和-webkit-text-fill-color以外，我们还可以利用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>

实现方式二 （立体空心发光字体）

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

实现方式三 （彩色渐变文字）

<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>