CSS 文本描边效果

text-shadow 实现文本描边

h1{
    text-shadow:
        -.025em -.025em 0 #444,
        .025em -.025em 0 #444,
        -.025em  .025em 0 #444,
        .025em  .025em 0 #444;
}

text-stroke 实现文本描边

• text-stroke 是 ext-stroke-width 和 text-stroke-color 的两个属性简写写法

text-stroke:<width> <color>

• text-stroke 属性常常与 text-fill-color (文本填充颜色) 一起使用

h1{
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:6px #f36;
}

实现渐变文本描边

h1{
    background:-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:#fff;
    -webkit-text-stroke:6px transparent;
}

使用 SVG 实现描边

<svg width="100%" height="300">
    <text class="text" x="100" y="150">H_VK</text>
</svg>

.text{
    fill:transparent;
    stroke-width:90px;
    stroke:#096;
}

SVG 动画描边

<svg viewBox="0 0 1320 300">
    <symbol id="s-text">
        <text text-anchor="middle"  x="50%" y="50%" dy=".35em">
            H_VK
        </text>
    </symbol>
    <use xlink:href="#s-text" class="text"></use>
        <use xlink:href="#s-text" class="text"></use>
        <use xlink:href="#s-text" class="text"></use>
        <use xlink:href="#s-text" class="text"></use>
        <use xlink:href="#s-text" class="text"></use>
</svg>

.text {
    fill: none;
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
    stroke: #F2385A;
    animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
    stroke: #F5A503;
    animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
    stroke: #E9F1DF;
    animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
    stroke: #56D9CD;
    animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
    stroke: #3AA1BF;
    animation-delay: -6s;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: -400;
    }
}

/* Other styles */
html, body {
    height: 100%;
}

body {
    background: #212121;
    background-size: .2em 100%;
    font: 14.5em/1 Open Sans, Impact;
    text-transform: uppercase;
    margin: 0;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

实现 Canvas 实现描边

<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
canvas.width = canvas.height = 800;
context.lineWidth = 6;
context.font = '8em/1 Bangers, sans-serif';
context.strokeStyle = '#f36';
context.strokeText("Hello H_VK",0, canvas.height / 2);

文章 GitHub 地址 :https://github.com/SilenceHVK/blog/issues/32 ，欢迎 Star。