发布于 4年前

CSS 渐变文本颜色

>>> 效果预览地址

为文本提供渐变颜色。

HTML

<p class="gradient-text">Gradient text</p>

CSS

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

说明

  1. background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
  2. webkit-text-fill-color: transparent 使用透明颜色填充文本。
  3. webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。
CSS
©2020 edoou.com   京ICP备16001874号-3