两种方法让文字实现抖音图标的故障风效果

引文：

抖音的故障风效果采用三种颜色叠加在一起，用对比色构造强烈视觉冲击，那么在前端中这种风格的文字应该怎么实现呢？本文将采用两种不同的方式来达到故障风格效果

第一种——::before , ::after 伪元素

::before 创建一个伪元素，作为已选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

::after用来创建一个伪元素，作为已选中元素的最后一个子元素。 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

 倘若你还不了解::before , ::after 伪元素的知识，可以先看一下这篇文章：

css中::before ::after的用法

在你了解过这两个伪元素的基础上，我们给出如下代码：

<style>
    h1{
        color: #fff;
        position: relative;
        width: 100%;
    }
    h1::before{
        content: "👋Hello!🪄Welcome to Cakndex's Blog";
        color: #22f4ee;
        position: absolute;
        z-index: -1;
        left: -2px;
        top: -2px;
    }
    h1::after{
    content:"👋Hello!🪄Welcome to Cakndex's Blog";
        color: #fd1857;
        position: absolute;
        z-index: -1;
        left: 2px;
        top: 2px;
    }
</style>
<h1>👋Hello!🪄Welcome to Cakndex's Blog</h1>

示例：

 ​

 细心的小伙伴会发现，利用::before , ::after的位移制造出的效果，会导致文字里的图标出现模糊重叠的问题，所以当文字里出现emoji等图标时，此方法效果并不理想

第二种办法——text-shadow

text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

利用这个属性，我们的代码只需写成：

<style>
    h1{
        color: #fff;
        position: relative;
        width: 100%;
        text-shadow: 2px 2px #fd1755,-2px -1px #2bf2ec, 30px 20px rgba(255, 255, 255, 0.03);
    }
</style>
<h1>👋Hello!🪄Welcome to Cakndex's Blog</h1>

   

 就能实现用比伪元素方法更少的代码，做出更棒的效果来

​