CSS3で背景をグラデーションカラーに設定する方法-CSSチュートリアル-php.cn

設定方法: 1. "background:linear-gradient(グラデーション方向, カラー 1, カラー 2,..);" ステートメントを使用します。 2. "background:radial-gradient(形状サイズ位置)" を使用します。、開始色、..、終了色);」ステートメント。

CSS3で背景をグラデーションカラーに設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

グラデーション

CSS3 グラデーションを使用すると、2 つ以上の指定した色の間でスムーズな移行が可能になります。グラデーション画像を使用する場合と比較して、グラデーションを使用するとダウンロード時間と帯域幅の使用量が削減され、拡大したときの見栄えが良くなります。

線形グラデーション

カラー値は、暗黙の直線に沿って徐々に遷移します。 linear-gradient() によって生成されます。

線形グラデーションを作成するには、少なくとも 2 つのカラーノードを定義する必要があります。カラーノードは、滑らかな遷移を示したい色です。同時に、開始点と方向（または角度）を設定することもできます。

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

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

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

ログイン後にコピー

Syntax

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

ログイン後にコピー

##: 角度の値を使用して、角度の方向 (または角度) を指定します。グラデーション。角度は時計回りに増加します。

: グラデーションラインの始点位置を記述します。 上へ、下へ、左へ、右へ これらの値は角度 0 度#に変換されます。 ## 、 180 度 、 270 度 および 90 度

。残りの値は上部中央から時計回りの角度に変換されます。グラデーション ラインの終点は、その始点の中心に対して対称です。

: カラー変更リスト。透明度 (

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で背景をグラデーションカラーに設定する方法

radial-gradient() CSS 関数は、中心点 (原点) から色の値が外側に広がり、徐々に他の色の値に遷移する画像を作成します。

また、少なくとも 2 つのカラーノードを定義する必要があり、グラデーションの中心 (デフォルトは中心点

center)、形状 (デフォルトの楕円 ##) も指定できます。 #ellipse)、サイズ (デフォルト

farthest-corner

、最も遠い隅を意味します) 構文<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

、デフォルト) または円 (

) size :
、グラデーションのエッジ形状は、グラデーションの中心点 (円) に最も近いコンテナーの側面に接するか、少なくともグラデーションの中心点に最も近い垂直および水平側面に接します (楕円）。
- 、グラデーションのエッジ形状は、グラデーションの中心点に最も近いコンテナーの角と交差します。
- 、最近接側とは対照的に、エッジ形状はグラデーションの中心点から最も遠いコンテナの側面 (または最も遠い垂直方向および水平方向の側面) に接しています。）。
- 、グラデーションのエッジ形状は、グラデーションの中心点から最も遠いコンテナの角と交差します。
- position
10% 20%

例: 背景色の放射状グラデーション--background-imageradial-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>

ログイン後にコピー

Repeat Gradient

指定された要素を埋めるのに十分になるまで、グラデーションパターンを複数回繰り返します。 CSS3で背景をグラデーションカラーに設定する方法 repeat-linear-gradient()

関数と

repeat-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 中国語 Web サイトの他の関連記事を参照してください。