在網(wǎng)頁設計中,字體漸變效果常常用來增加頁面的視覺吸引力和藝術(shù)感。CSS技術(shù)可以實現(xiàn)各種不同的字體漸變樣式,下面介紹幾種實現(xiàn)方法:
/* 線性漸變:從上到下 */ background: linear-gradient(to bottom, #ff9999 0%, #ff3300 100%); /* 線性漸變:從左到右 */ background: linear-gradient(to right, #ff9999 0%, #ff3300 100%); /* 鏡像反轉(zhuǎn)線性漸變 */ background: -webkit-linear-gradient(315deg, #f3ec78, #af4261 67%, #03a9f4); background: linear-gradient(135deg, #f3ec78, #af4261 67%, #03a9f4);
第一個例子展示了如何使用線性漸變樣式,漸變方向為從上到下。其中,#ff9999 0%表示漸變起點顏色,#ff3300 100%表示漸變結(jié)束顏色。如果想要從左到右漸變,則將to bottom改為to right即可。
第二個例子同樣是線性漸變,只不過漸變方向從左到右。這里的起始顏色為#ff9999,結(jié)束顏色為#ff3300。
第三個例子實現(xiàn)了一個鏡像反轉(zhuǎn)的線性漸變。代碼中的-webkit-linear-gradient指定了Chrome和Safari瀏覽器渲染時的漸變樣式,而后面的linear-gradient則是其他瀏覽器的標準語法。135deg表示漸變的角度,#f3ec78表示起始顏色,#af4261 67%表示中間點的顏色(這里為67%的位置),#03a9f4表示結(jié)束顏色。