CSS篇：如何將頁面背景設定漸層效果（程式碼詳解）-css教學-PHP中文網

CSS篇：如何將頁面背景設定漸層效果（程式碼詳解）

奋力向前

發布： 2021-08-03 18:19:47

原創

14962 人瀏覽過

在

之前的文章《如何使用html製作一個簡潔的提交表單（程式碼詳解）》中，給大家介紹了怎樣使用html製作一個表單。下面這篇文章跟大家介紹怎樣使用css設定背景色漸層呢，我們一起看看怎麼做。

CSS篇：如何將頁面背景設定漸層效果（程式碼詳解）

它們都可以用自己的方式表示任何顏色，只不過角度不同。

在RGB模式下，所有顏色都可以用紅（red）綠（green）藍（blue）的不同能比組合得到。

如:

rgb（100%，0%，0%）為紅色；

rgb（100%，50%，0%）為橘紅色；

rgb（80%，0%，100%）為紫色。

可以在瀏覽器內分別測試這幾個值

root { background rgb(100% 0% 0%); }

登入後複製

rgb（100%，0%，0%）也可以寫成rgb（255，0， 0），每種原色被分成255等分。
0表示完全沒有強度，255表示最高強度。雖然rgb（255，0，0）和rgb（100，0，0）都是紅色，但前者要比後者看起來更鮮豔，因為其發光強度高。
這一點用黑色和白色也很好證明。 RGB模式下的黑色是rgb（0，0，0）（三項都不發光），而白色是rgb（255，255，255）（三項都發最強光）。

CSS設定div漸層背景的方法

1、使用一個div標籤。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

登入後複製

2、header標籤裡面設定<div>標籤。

<!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設定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、然後設定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，設定漸層從頂部開始，到底部結束。寫了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、再設定顏色的漸層順序，顏色可以設定多。

<!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>

登入後複製

效果圖如下：

CSS篇：如何將頁面背景設定漸層效果（程式碼詳解）