CSS提供了多種方式來實(shí)現(xiàn)漸變效果,其中從上往下漸變是比較常見的一種。
background: linear-gradient(to bottom, #ffffff, #000000);
上述代碼中,利用linear-gradient函數(shù)來實(shí)現(xiàn)從上往下的漸變,to bottom表示顏色變化方向?yàn)閺纳现料拢?ffffff和#000000分別代表起始顏色和結(jié)束顏色。
如果想要實(shí)現(xiàn)多種顏色的漸變過渡,可以在linear-gradient函數(shù)中加入多個參數(shù)。例如:
background: linear-gradient(to bottom, #ffffff, #e6e6e6, #cccccc, #b3b3b3, #999999, #808080, #666666, #4d4d4d, #333333, #1a1a1a, #000000);
上述代碼中,顏色過渡會在#ffffff到#e6e6e6,#e6e6e6到#cccccc,以此類推,最終到達(dá)#000000。
除了從上往下的漸變,CSS還支持從下往上、從左往右和從右往左的漸變效果。需要指定對應(yīng)的方向即可,例如:
background: linear-gradient(to top, #ffffff, #000000); background: linear-gradient(to right, #ffffff, #000000); background: linear-gradient(to left, #ffffff, #000000);
以上代碼分別表示從下往上、從左往右以及從右往左的漸變效果。
總之,CSS提供了豐富的漸變方式,只需要根據(jù)需要指定相應(yīng)的參數(shù)即可實(shí)現(xiàn)。