中空テキスト効果を実現する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-steroid と -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>