css怎樣設置漸變背景

在當前很多瀏覽器的網頁中,我們可以看到有很多網頁都有漸變背景的,那麼網頁怎樣實現漸變背景呢?今天咪咪我就來分享一下HTML中設置漸變背景的方法。

操作方法

（01）首先,先設置兩個div,然後給它們添上類名。

（02）然後我們對第一個div設置線性漸變，如圖所示，先設置好寬高,然後給background設置-webkit-linear-gradient。

（03）然後裏面設置參數，top表示的是位置，從頂部開始，當然其他位置參數比如left ，right，bottom也是可以的，後面的表示的是顏色值。

（04）如圖，設置好之後，我們的div背景顏色就從上往下，由紅色漸變成藍色。

（05）此外，我們可以設置left top表示從左上角開始，到右下角，也就是對角線漸變。注意，位置之間沒有逗號哦。並且left不能和right同時存在，同理，top也不能和bottom同時存在哦。

（06）保存之後，我們就可以看到背景顏色從對角線開始漸變了哦。

（07）當然，我們也可以設置多個顏色漸變，如圖，我就隨意的設置了幾種顏色，大家可以根據自己的喜好來設置顏色。

（08）如圖所示，這就是幾種顏色的漸變，有紅，藍，綠，黃等顏色漸變。

（09）接着我們來設置徑向漸變，對background設置-webkit-radial-gradient。

（10）然後我們在裏面添加顏色值，注意，位置默認是從中心點開始的，所以我們可以不用設置。

（11）之後，徑向漸變就成功了，默認從中心點開始進行漸變。

（12）此外，我們還可以設置漸變的範圍，如圖，在顏色的後面添加百分比，這樣就可以設置顏色範圍了。

（13）如圖，百分比設置好之後，顏色範圍就改變了，這裏我就設置綠色範圍比較多。