要制作一個漂亮的漸變背景,CSS是很好用的工具。下面我們來看看如何使用CSS制作漸變背景。
/* 設置漸變背景 */ .background { background: linear-gradient(to bottom, #2785C4, #BEE0F8); }
上面的代碼就可以設置一個從上到下的藍色漸變背景。它的語法很簡單,首先我們選擇要應用漸變背景的元素,這里選擇了一個叫background的類;然后使用background屬性設置背景,其中linear-gradient表示線性漸變,可以設置的方向有to top、to right、to bottom、to left等;#2785C4和#BEE0F8是兩個顏色值,分別表示起始和結束顏色。
如果我們想要設置徑向漸變背景,可以這樣寫:
/* 設置徑向漸變背景 */ .background { background: radial-gradient(ellipse at center, #2785C4, #BEE0F8); }
這里的語法也很簡單,radial-gradient表示徑向漸變,ellipse at center表示圓形,可以設置成circle表示正圓;#2785C4和#BEE0F8是起始和結束顏色,可以根據需要任意修改。
除了上述兩種漸變背景之外,還可以設置漸變角度或者多種顏色漸變等等,大家可以根據需要自行選擇。
上一篇怎么用css去除邊框