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

Z时代
2024-01-10
分类：技术分享

比如，这个用了渐变

<div>在现场是蓄势待发的说法</div>

这个用了text-shadow
`
<div>在现场是蓄势待发的说法</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>