文字渐变

如今你可以在很多地方看到文本渐变等漂亮的技巧......但是呢？你有没有想过它们是如何制作的？今天就教你吧

.text-gradient {
  background: linear-gradient(-25deg, #5662f6 0%, #7fffd4 100%);
  color: transparent;
  background-clip: text;
}

首先看到这里我们给文本背景赋予了渐变。然后我们将文本颜色设为透明，使其不可见。
之后我们将使用background-clip属性来制作文本，以便背景的颜色变成文本的颜色。

要了解更多4个这样的技巧，请点击下面的图片?