CSS3文字漸變顏色是CSS3中的一種新特性,可以用來為文字添加漸變色效果,讓文字看起來更加生動、鮮明。
例子: h1 { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
在上面的代碼中,我們使用了CSS3的線性漸變函數(linear-gradient),指定了從紅色到紫色的七種顏色漸變,將這個漸變應用到了h1標簽的背景上。
但是我們只想要文字出現漸變色,那么就需要用到-webkit-text-fill-color: transparent;這個屬性設置文字顏色為透明,而后將背景漸變透過-webkit-background-clip: text;映射到文字上,最終完成文字漸變效果。
除了線性漸變,CSS3中還有徑向漸變(radial-gradient)、重復漸變(repeating-linear-gradient)和反向漸變(to bottom right)等用法。我們可以根據需求選擇合適的漸變方式,為頁面添加豐富多彩的效果。