純CSS3文字顏色漸變 - 可能嗎？

有沒有辦法創建一個跨瀏覽器，純粹的CSS3文字顏色漸變？純CSS3文字顏色漸變 - 可能嗎？

所以，沒有png的。沒有'webkit'只。

編輯：更準確地說：它只是CSS3，它是用於文本而不是框漸變。

編輯：我發現this solution，但它僅適用於WebKit的。

來源

2011-01-19 Kriem

跨越其瀏覽器？那些支持CSS3的？ – zzzzBov 2011-01-19 20:04:01

@zzzzBov - 是的。 :) – Kriem 2011-01-19 20:16:23

背景是純色嗎？ – 2011-01-19 22:55:38

在webkit之外沒有跨瀏覽器的方式，因爲只有webkit目前有background-clip: text，this extension to background-clip不在標準軌道上（據我所知）。如果你想放鬆你的CSS3需求，你可以用Canvas（或SVG）完成與跨瀏覽器相同的效果，但是你只是在討論支持HTML5的瀏覽器。

來源

2011-01-20 05:57:42

目前沒有「純粹的」CSS方式，但有一種方法使用CSS和一些內容重複。請參閱my server side css gradient text solution here，它不需要JavaScript或純背景。你也可以使用JavaScript做這個客戶端，看Dragonlabs做了什麼here。

來源

2011-10-17 16:19:12

正如我已經在zzzzBov的迴應中指出的那樣，有一種方法可以在CSS3中實現文本漸變。

如果您進一步瞭解PNG solution，您可以使用css3漸變執行相同的技巧。

當然，這隻適用於統一背景顏色的文本。

來源

2012-02-28 16:58:07 enyo

-1

此刻

最佳解決方案是使用純色非webkit的回退，然後使用以下技術（需要的webkit）：

h1 { 
 
    color: $333; 
 
    font-size: 72px; 
 
    background: -webkit-linear-gradient(#eee, #333); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<h1>Example</h1>

來源

2016-05-20 00:57:39 sean2078

純CSS3文字顏色漸變 - 可能嗎？

回答

相關問題