css3怎麼將背景設為漸層色-css教學-PHP中文網

設定方法：1、使用「background:linear-gradient(漸變方向,顏色1,顏色2,..);」語句；2、使用「background:radial-gradient(shape 大小位置,開始顏色,..,終止顏色);”語句。

css3怎麼將背景設為漸層色

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

漸層 Gradient

CSS3 漸層（gradients）可以讓在兩個或多個指定的顏色之間顯示平穩的過渡。比較使用漸層圖片，gradients 可以減少下載的時間和寬頻的使用，並且在放大時看起來效果更好。

線形漸層

顏色值沿著一條隱式的直線逐漸過渡。由 linear-gradient() 產生。

為了建立一個線性漸變，你必須至少定義兩個顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設定一個起點和一個方向（或一個角度）。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

登入後複製

語法

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

登入後複製

#<angle>：以角度值指定漸層的方向（或角度）。角度順時針增加。
<side-or-corner>：描述漸層線的起始點位置。 to top, to bottom, to left 和to right 這些值會轉換成角度0 度 、180 度、270 度 和90 度。其餘值會轉換為一個以向頂部中央方向為起點順時針旋轉的角度。漸層線的結束點與其起點中心對稱。
<color-stop-list>：顏色變化清單。支援透明度（rgba(255,0,0,0.1)）。

範例：背景色線性漸層--background-image linear-gradient()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--线性渐变</title>
		<style>
			.demo{
				width:500 ;
				height: 300;
				margin: 50px auto;
			}
			.demo *{
				width: 200px;
				height: 200px;
				margin: 20px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				font-size: 16px;
				float: left;
			}
			.demo1{
				/* 底色 */
				background-color: #fd0d0d;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
				/* chrome 10+, safari 5.1+ */
				background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* firefox; multiple color stops */
				background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
				/* ie 6+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;);
				/* ie8 + */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;)";
				/* ie10 */
				background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* opera 11.1 */
				background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* 标准写法 */
				background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

			}
			.demo2{
				/* 底色 */
				background-color:#d41a1a;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
				/* chrome 10+, safari 5.1+ */
				background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* firefox; multiple color stops */
				background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* ie10 */
				background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
				/* opera 11.1 */
				background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
				/* 标准写法 */
				background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">基本线性渐变--自上而下</div>
		    <div class="demo2">基本线性渐变--45度角</div>
		</div>
	</body>
</html>

登入後複製

css3怎麼將背景設為漸層色

##徑向漸層
CSS 函數創建了一個圖像，該圖像的顏色值由一個中心點（原點）向外擴散並逐漸過渡到其他顏色值。同樣至少需要定義兩種顏色節點，也可以指定漸層的中心（預設在中心點，
- ）、形狀（預設橢圓形ellipse）、大小（預設
- ，表示到最遠的角落）
- <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">radial-gradient( [shape size at position] ? <color-stop-list> [ , <color-stop-list> ]+ )</pre><div class="contentsignin">登入後複製</div></div>
- shape ：橢圓形（ellipse
circle
size：
closest -side

closest-corner，漸層的邊緣形狀與容器距離漸層中心點最近的一個角相交。

css3怎麼將背景設為漸層色 farthest-side

，與 closest-side 相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊）。

farthest-corner

，漸層的邊緣形狀與容器距離漸層中心點最遠的一個角相交。

position

：可以是具體的兩個位置偏移值（

10% 20%

），也可以是關鍵字（left、right、top、bottom） css3怎麼將背景設為漸層色

範例：背景色徑向漸層--background-image radial-gradient()

###

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--径向渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				background-image: -moz-radial-gradient(#ecff05, red);
				background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
				background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
				background-image: radial-gradient(#ecff05, red);
			}
			.demo2{
				background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
				background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
				background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

登入後複製

# ##############重複漸層#########重複多次漸層圖案直到足以填滿指定元素。由 ###repeating-linear-gradient()### 和 ###repeating-radial-gradient()### 函數產生。 ######重複函數的參數同上，不同的是它會基於漸變長度（最後一個色標和第一個之間的距離）倍數重複。 ###

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--重复渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				    background: repeating-linear-gradient(
				    to top left,
				    lightpink,
				    lightpink 5px,
				    white 5px,
				    white 10px
				  );
			}
			.demo2{
				   background: repeating-radial-gradient(
				    powderblue,
				    powderblue 8px,
				    white 8px,
				    white 16px
				  );
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

登入後複製

############（學習影片分享：###css影片教學###）###

以上是css3怎麼將背景設為漸層色的詳細內容。更多資訊請關注PHP中文網其他相關文章！