ホームページ > 記事 > ウェブフロントエンド > CSS3 のグラデーションのカテゴリは何ですか?
CSS3 のグラデーションのカテゴリは何ですか?
- WBOYオリジナル
- 2022-03-29 17:23:123238ブラウズ
css3 のグラデーションは次のように分類できます: 1. 線形グラデーション、構文は "linear-gradient(gradient Direction, color 1, color 2, ...);"; 2. 放射状グラデーション、構文「radial-gradient(円の種類 グラデーション サイズ グラデーション位置, カラー 1, カラー 2);」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 のグラデーションのカテゴリは何ですか?
CSS3 のグラデーションは、linear-gradient (線形グラデーション) とradial-gradient (放射状グラデーション) に分類されます。
線形グラデーション - 下/上/左/右/斜め
放射状グラデーション (放射状グラデーション) - 中心で定義
linear gradient
linear-gradient() 関数 2 つ以上の線形グラデーションを表す画像を作成するために使用されます。色。
線形グラデーションを作成するには、2 つの色を指定する必要があります。さまざまな方向 (角度として指定) でグラデーション効果を実現することもできます。方向が指定されていない場合、グラデーションはデフォルトで上から下に設定されます。
CSS 構文
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 角度値を使用して、グラデーションの方向 (または角度) を指定します。
color-stop1、color-stop2、... は、グラデーションの開始色と終了色を指定するために使用されます。
#例は次のとおりです。
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>出力結果:
放射状グラデーション
radial-gradient() 関数は、放射状グラデーションを持つ「画像」を作成します。 放射状のグラデーションは中心点によって定義されます。 放射状のグラデーションを作成するには、2 つのストップ カラーを設定する必要があります。CSS 構文
background-image: radial-gradient(shape size at position, start-color, ..., last-color);shape 円のタイプを決定します:ellipse (デフォルト): 楕円の放射状のグラデーションを指定します。 circle: 円の放射状のグラデーションを指定します。size は、グラデーションのサイズを定義します。可能な値:
- ##farthest-corner (デフォルト) : 放射状グラデーションの半径の長さを円の中心から中心から最も離れた角まで指定します。
- ##最近接: 円の中心から放射状グラデーションの半径の長さを指定します。
- closest-corner: 円の中心から円の中心に最も近い角までの放射状グラデーションの半径の長さを指定します
#farthest-side: 放射状のグラデーションを指定します。半径の長さは、円の中心から中心から最も遠い側までです。 #position はグラデーションの位置を定義します。可能な値:
center (デフォルト): 放射状グラデーション円の中心の座標値を設定します。
top: 上部を放射状グラデーション円の中心の縦座標値に設定します。
bottom: 底部を放射状グラデーション円の中心の縦座標値に設定します。
start-color、...、last-color は、グラデーションの開始色と終了色を指定するために使用されます。
#例は次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> #grad1 { height: 150px; width: 200px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */ } #grad2 { height: 150px; width: 200px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <h3>径向渐变 - 形状</h3> <p><strong>椭圆形 Ellipse（默认）：</strong></p> <div id="grad1"></div> <p><strong>圆形 Circle：</strong></p> <div id="grad2"></div> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>出力結果:
(学習ビデオ共有:
css ビデオ チュートリアル
以上がCSS3 のグラデーションのカテゴリは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。