【CSS】实现文本颜色渐变

最新推荐文章于 2026-06-23 23:18:49 发布

原创最新推荐文章于 2026-06-23 23:18:49 发布 · 405 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #css3 #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 直接支持。