css實現文字漸變

在前端開發中，給文字設置漸變色是完全可以實現的，常用的方式是結合 CSS 的 background、-webkit-background-clip 和 -webkit-text-fill-color 屬性。下面是一個常見的實現方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文字漸變色示例</title><style>.gradient-text {font-size: 48px;font-weight: bold;background: linear-gradient(90deg, #ff7e5f, #feb47b);/* 背景裁剪到文字 */-webkit-background-clip: text;/* 文字填充色設置為透明，顯示背景 */-webkit-text-fill-color: transparent;/* 兼容 Firefox */background-clip: text;color: transparent;}</style>
</head>
<body>// 注意div可能存在問題，因為div是塊狀元素，占據整行，在文字部分可能還沒有體現出漸變來呢<span class="gradient-text">漸變色文字效果</span>
</body>
</html>

說明：

background: linear-gradient(...) 設置漸變背景。
-webkit-background-clip: text 讓背景只顯示在文字上（Safari/Chrome）。
-webkit-text-fill-color: transparent 讓文字本身變透明，只顯示背景色。
background-clip: text 和 color: transparent 用于兼容部分瀏覽器（如 Firefox）。

注意事項：

這種方式在大部分現代瀏覽器（Chrome、Safari、Edge、Firefox）都能生效，但在部分老舊瀏覽器（如 IE）可能不支持。
你可以自由調整漸變的顏色、方向等參數。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/907836.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/907836.shtml
英文地址，請注明出處：http://en.pswp.cn/news/907836.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！