CSS 实现彩色渐变文字
<p>效果图:<br></p><p>实现方法详见代码:</p><pre><code class="lang-html"><!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<span class="word">Warren Ma 的编程小站</span>
</body>
<style>
.word { // 需要注意一下你的文字容器的大小，如果远远大于文字，那么渐变效果将会很不明显，所以推荐直接使用 span 作为容器
background: linear-gradient(60deg, #12c2e9 0%, #c471ed 100%); // 设置容器背景为渐变色
background-clip: text; // 设置容器背景的展示范围，设置成 text 之后，背景色就只会展示在文字里
-webkit-background-clip: text; // 兼容写法，建议保留
color: transparent; // 将文字颜色设置成透明，以便透过文字看到背景色
font-weight: bold; // 设置字重、无关紧要的样式
font-size: 100px; // 设置字体大小、无关紧要的样式
}
</style>
</html>
</code></pre>
<div class="post-copyright">
<div class="alert" role="alert">最后编辑时间为: November 30th , 2022 at 10:45 am<br>本文由 <ahref="https://ma-zhe.com/index.php/author/1/">Warren Ma</a> 创作，采用 <ahref="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0</a> 国际许可协议进行许可<br>可自由转载、引用，但需署名作者且注明文章出处</div>
</div>
<div class="post-tags"></div>
页:
[1]