SOURCE

<h1 class="h1">凸版印刷效果</h1>
<h1 class="h2">空心字效果text shadow</h1>
<h1 class="h3">
    <svg height="1.2em">
        <use xlink:href="#css"/>
        <text id="css" y="1em">空心字效果SVG</text>
    </svg>
</h1>
<h1 class="h4">文字外发光效果</h1>
<h1 class="h5">文字凸起效果</h1>
<h1 class="h6">文字凸起效果2</h1>

h1 {
    padding: 0 0.5em;
}
.h1 {
    background: hsl(210, 13%, 40%);
    color: hsl(210, 13%, 75%);
    text-shadow: 0 -1px 1px black;
}
.h2 {
    background: deeppink;
    color: white;
    text-shadow: 3px 3px black, -3px -3px black, 3px -3px black, -3px 3px black;
}
.h3 {
    background: deeppink;
    color: white;
}
.h3 text { fill: currentColor }
.h3 use {
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
}
.h4 {
    background: #203;
    color: white;
    text-shadow: 0 0 .1em, 0 0 .3em;
}
.h5 {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0, 0%, 85%),
        0 2px hsl(0, 0%, 80%),
        0 3px hsl(0, 0%, 75%),
        0 4px hsl(0, 0%, 70%),
        0 5px hsl(0, 0%, 65%),
        0 5px 10px black;
}
.h6 {
    background: hsl(0, 50%, 45%);
    color: white;
    text-shadow: 1px 1px black, 2px 2px black,
        3px 3px black, 4px 4px black,
        5px 5px black, 6px 6px black,
        7px 7px black, 8px 8px black;
}