在css中，可利用background屬性和linear-gradint()函數實現上下漸變的效果，語法為「background:linear-gradient(to bottom,上方顏色,下方顏色);」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
上下漸變的css怎麼寫
1、新建一個html文件，命名為test.html，用於講解css中如何實現從上往下的漸層色。使用div標籤建立一個模組，用於測試。為div標籤新增一個class屬性，設定為mytest。
在css標籤內，透過class定義div的樣式，設定它的寬度為400px，高度為200px。
2、在css標籤內，透過background屬性，利用linear-gradient，使用to bottom實作從上往下由紅色到黃色漸層。
linear-gradient() 函數用於建立一個表示兩種或多種顏色線性漸變的圖片。
建立一個線性漸變，需要指定兩種顏色，還可以實現不同方向（指定為一個角度）的漸變效果，如果不指定方向，預設從上到下漸變。
語法為：
linear-gradient(direction, color-stop1, color-stop2, ...);
其中需要注意的是;
direction表示用角度值指定漸變的方向（或角度），color-stop1, color -stop2,...用於指定漸變的起止顏色。
在瀏覽器中開啟test.html文件，查看實現的效果。
總結：
1、使用div標籤建立一個模組，用於測試。
2、為div標籤新增一個class屬性，設定為mytest。
3、在css標籤內，透過class定義div的樣式，設定它的寬度為400px，高度為200px。
4、在css標籤內，透過background屬性，利用linear-gradient，使用to bottom實作從上往下由紅色到黃色漸層。
更多程式相關知識，請造訪：程式設計影片！ ！
以上是上下漸層的css怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
