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）如圖，百分比設定好之後，顏色範圍就改變了，這裡我就設定綠色範圍比較多。