css3文字漸變無效果的解決方案
阿新 • • 發佈:2018-07-06
site top bsp 流行 webkit col 運行 kit line
現在css3越來月流行了,為了實現一些高大上的效果,我們會用一些漸變的特效,請看文字漸變的特效代碼:
.title { font-size: 60px; line-height: 80px; text-align: center; margin-top: 15%; -webkit-background-clip: text; background: linear-gradient(to right, red, blue); color: transparent; }
<div class="title"> Welcome to our website </div>
運行一下,發現沒有效果,是不是很奇怪
這個時候我們要改變一下屬性的順序:
.title { font-size: 60px; line-height: 80px; text-align: center; margin-top: 15%; background: linear-gradient(to right, red, blue); -webkit-background-clip: text; /*這個屬性只能放在background屬性的後面*/ color: transparent; }
再運行一下,是不是很神奇的事情發生了,文字漸變出現了
css3文字漸變無效果的解決方案