上下漸變的css如何實(shí)現(xiàn)

小編給大家分享一下上下漸變的css如何實(shí)現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

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è)表示兩種或多種顏色線性漸變的圖片。

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

語(yǔ)法為：

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

其中需要注意的是;

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

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

以上是“上下漸變的css如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！