css实现文字渐变效果

CSS实现文字渐变效果

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以实现对网页元素的布局、颜色、字体等样式的控制。文字渐变效果是指文字颜色从一种颜色平滑过渡到另一种颜色的视觉效果。

类型

线性渐变：文字颜色沿一条直线方向逐渐变化。
径向渐变：文字颜色从一个中心点向外逐渐变化。

应用场景

网页标题
按钮
标签
引用文本

实现方法

以下是使用CSS实现文字渐变效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Gradient</title>
    <style>
        .gradient-text {
            font-size: 3em;
            background: -webkit-linear-gradient(left, #ff9a9e, #fad0c4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <h1 class="gradient-text">Hello, Gradient Text!</h1>
</body>
</html>

解释

background：设置渐变背景，-webkit-linear-gradient表示线性渐变，left表示渐变方向从左到右，#ff9a9e和#fad0c4是渐变的起始和结束颜色。
-webkit-background-clip：将背景剪裁到文本区域，使渐变效果仅应用于文本。
-webkit-text-fill-color：将文本填充颜色设置为透明，使背景渐变效果可见。