站長(zhǎng)資訊網(wǎng)
之前的文章《如何使用html制作一個(gè)簡(jiǎn)潔的提交表單（代碼詳解）》中，給大家介紹了怎樣使用html制作一個(gè)表單。下面本篇文章給大家介紹怎樣使用css設(shè)置背景色漸變呢，我們一起看看怎么做。
它們都可以用自己的方式表示任何顏色，只不過角度不同。
在RGB模式下，所有顏色都可以用紅（red）綠（green）藍(lán)（blue）的不同能比組合得到。
如:
rgb（100%，0%，0%）為紅色；
rgb（100%，50%，0%）為橘紅色；
rgb（80%，0%，100%）為紫色。
可以在瀏覽器內(nèi)分別測(cè)試這幾個(gè)值
root { background rgb(100% 0% 0%); }
-
rgb（100%，0%，0%）也可寫成rgb（255，0，0），每種原色被分為255等分。
-
0表示完全沒有強(qiáng)度，255表示最高強(qiáng)度。雖然rgb（255，0，0）和rgb（100，0，0）都是紅色，但前者要比后者看上去更鮮艷，因?yàn)槠浒l(fā)光強(qiáng)度高。
-
這一點(diǎn)用黑色和白色也很好證明。RGB模式下的黑色是rgb（0，0，0）（三項(xiàng)都不發(fā)光），而白色是rgb（255，255，255）（三項(xiàng)都發(fā)最強(qiáng)光）。
CSS設(shè)置div漸變背景的方法
1、使用一個(gè)div標(biāo)簽。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css顏色漸變</title> </head> <body> <div> </div> </body> </html>
2、header標(biāo)簽里面設(shè)置<div>標(biāo)簽。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css顏色漸變</title> <style type="text/css"> div{ } </style> </head> <body> <div> </div> </body> </html>
3、顏色漸變，需要給div設(shè)定width和height，寬度和高度。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css顏色漸變</title> <style type="text/css"> div{ width:150px; height:70ps; } </style> </head> <body> <div> </div> </body> </html>
4、然后設(shè)置div的background背景屬性，背景顏色漸變就用到-webkit-linear-gradient。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css顏色漸變</title> <style type="text/css"> div{ width:150px; height:70ps; background:-webkit-linear-gradient(); } </style> </head> <body> <div> </div> </body> </html>
5、在-webkit-linear-gradient里面寫top，設(shè)定漸變從頂部開始，到底部結(jié)束。寫了top就不要寫bottom。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css顏色漸變</title> <style type="text/css"> div{ width:150px; height:70ps; background:-webkit-linear-gradient(top); } </style> </head> <body> <div> </div> </body> </html>
6、再設(shè)定顏色的漸變順序，顏色可以設(shè)定多。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css顏色漸變</title> <style type="text/css"> div{ width:150px; height:70ps; background:-webkit-linear-gradient(top,white,lightblue,skyblue); } </style> </head> <body> <div> </div> </body> </html>
效果圖如下：
推薦學(xué)習(xí)：CSS視頻教程
