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

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

上下漸變的css怎么寫

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

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

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

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

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

語法為：

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

其中需要注意的是;

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

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

總結(jié)：

1、使用div標簽創(chuàng)建一個模塊，用于測試。

2、給div標簽添加一個class屬性，設置為mytest。

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

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