【CSS】实现文本颜色渐变

sunshine6412025-06-19 19:19

效果：

代码：

html 复制代码

<span 
 style="
    background: linear-gradient(45deg, #ff5847 20%, #d699fb 84%, #9177ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
">
    2025-02-05 17:14:44
</span>

background-clip 常用值

值	效果
`border-box`	背景延伸到边框外边缘（默认值）。
`padding-box`	背景延伸到内边距（padding）外边缘，不包含边框。
`content-box`	背景仅覆盖内容区域，不包含内边距和边框。
`text`	背景被裁剪为文字的前景色（需配合 `-webkit-text-fill-color: transparent`）。 WebKit/Blink 浏览器（Chrome、Safari、Edge）需要 `-webkit-` 前缀，Firefox 直接支持。

`-webkit-text-fill-color`

一个 WebKit 浏览器特有的 CSS 属性，用于设置文本的填充颜色。会覆盖 color 属性的值。

与 -webkit-background-clip: text 结合使用时，可以创建文字渐变效果。