使用text-stroke文字的描边属性

text-stroke：描边大小 描边颜色;

配合color: transparent;既可以做到字体镂空的效果

<style>

    div {

        color: transparent;

    }

    .box1 {

        font-size: 30px;

        background-color: green;

        -webkit-text-stroke: 0.3px black;

    }

    .box2 {

        font-size: 18px;

        background-color: #c0c0c0;

        -webkit-text-stroke: 0.3px red;

    }

    .box3 {

        font-size: 12px;

        background-color: rgba(0, 26, 255, 0.418);

        -webkit-text-stroke: 0.1px yellow;

    }

</style>

<div class="box1">
    镂空字体
</div>
<div class="box2">
    镂空字体
</div>
<div class="box3">
 镂空字体
</div>