css ，给文本加渐变色后，没办法加text-shadow属性

发布于
2020-07-01

比如，这个用了渐变

<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>
`

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

前端

阅读 3.5k

4 个回答

得票最新

然后去远足

43.1k103863

发布于
2020-07-01

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

Fractal

5.5k22434

发布于
2020-07-01

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

guangzan

4911137

发布于
2020-07-01

更新于
2020-07-01

<!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