css ，给文本加渐变色后，没办法加text-shadow属性_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

比如，这个用了渐变

<div style="background: linear-gradient(to right bottom, #dafc79, #49edff,#7a83e9) ;-webkit-background-clip: text; color: transparent;">在现场是蓄势待发的说法</div>

这个用了text-shadow
`
<div style="color: red;text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;">在现场是蓄势待发的说法</div>
`

我要把两者结合起来，就有问题了
求大神有什么好办法么

###

那就别用 text-shadow 了，用 filter 滤镜 drop-shadow 吧。

###

加一层绝对定位 DIV，放文字渐变色
原来的 DIV 放透明色文字加 text-shadow

###

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />

  <style type="text/css">
    div {
      position: relative;
      color: yellow;
      text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;
    }

    div:before {
      content: attr(text);
      position: absolute;
      z-index: 10;
      color: pink;
      -webkit-mask: linear-gradient(to left, red, transparent);
    }
  </style>
  </style>
</head>

<body>
  <div text="在现场是蓄势待发的说法">在现场是蓄势待发的说法</div>
</body>

</html>

批注 2020-07-01 153641.png

参考： https://cloud.tencent.com/dev...

###

Firefox/Chrome 下实测没有问题 codepen