文字渐变色和字体阴影同时使用的问题

今天还原UI稿遇到了一个文字渐变色加阴影的地方，正常的使用文字渐变色（background-image: -webkit-gradient） + 字体阴影（ text-shadow），发现效果是不对的，阴影部分直接出现在了文字上边，如下：

渐变 渐变+阴影

代码写法如下：

<h1>{{ words }}</h1>

 h1 {

         position: relative;

        background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb55d), to(#7af035));

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        text-shadow: 0 4px 6px;

    }

这里问题的原因应该是两个属性冲突了，所以考虑用after伪类来实现效果，让h1标签本身加阴影，然后用伪类content形式实现渐变色，代码如下：

<h1 :data-content="words">{{ words }}</h1>

h1 {

        position: relative;

        text-shadow: 0 4px 6px;

        &::after {

            display: block;

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            content: attr(data-content);

            background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb55d), to(#7af035));

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            text-shadow: none;

        }

    }

这样就得到我们需要的效果了:

渐变+阴影

content: attr(data-content)，这个地方用到了content，content属性是用来让我们使用css向元素里边填写内容的，然后attr可以动态的从元素中获取内容（提前定义好的data-content）,不清楚的可以再去详细了解一下。