設定方法: 1. "background:linear-gradient(グラデーション方向, カラー 1, カラー 2,..);" ステートメントを使用します。 2. "background:radial-gradient(形状サイズ位置)" を使用します。 、開始色、..、終了色);」ステートメント。
このチュートリアルの動作環境: 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> )
ログイン後にコピー
<!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='#fd0d0d', endColorstr='#d89e3c');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";
/* 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>ログイン後にコピー
# 放射状グラデーション
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
、デフォルト) または円 (
Repeat Gradient
指定された要素を埋めるのに十分になるまで、グラデーション パターンを複数回繰り返します。 
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
