今天还原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）,不清楚的可以再去详细了解一下。
网友评论