在css中，可利用background屬性和linear-gradint()函數(shù)實(shí)現(xiàn)上下漸變的效果，語(yǔ)法為“background:linear-gradient(to bottom,上方顏色,下方顏色);”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

上下漸變的css怎么寫(xiě)

1、新建一個(gè)html文件，命名為test.html，用于講解css中如何實(shí)現(xiàn)從上往下的漸變色。使用div標(biāo)簽創(chuàng)建一個(gè)模塊，用于測(cè)試。給div標(biāo)簽添加一個(gè)class屬性，設(shè)置為mytest。

在css標(biāo)簽內(nèi)，通過(guò)class定義div的樣式，設(shè)置它的寬度為400px，高度為200px。

2、在css標(biāo)簽內(nèi)，通過(guò)background屬性，利用linear-gradient，使用to bottom實(shí)現(xiàn)從上往下由紅色到黃色漸變。

linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線(xiàn)性漸變的圖片。

創(chuàng)建一個(gè)線(xiàn)性漸變，需要指定兩種顏色，還可以實(shí)現(xiàn)不同方向（指定為一個(gè)角度）的漸變效果，如果不指定方向，默認(rèn)從上到下漸變。

語(yǔ)法為：

linear-gradient(direction, color-stop1, color-stop2, ...);

其中需要注意的是;

direction表示用角度值指定漸變的方向（或角度），color-stop1, color-stop2,…用于指定漸變的起止顏色。

在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果。

總結(jié)：

1、使用div標(biāo)簽創(chuàng)建一個(gè)模塊，用于測(cè)試。

2、給div標(biāo)簽添加一個(gè)class屬性，設(shè)置為mytest。

3、在css標(biāo)簽內(nèi)，通過(guò)class定義div的樣式，設(shè)置它的寬度為400px，高度為200px。

4、在css標(biāo)簽內(nèi)，通過(guò)background屬性，利用linear-gradient，使用to bottom實(shí)現(xiàn)從上往下由紅色到黃色漸變。