CSS3 のグラデーションのカテゴリは何ですか?-フロントエンドQ&A-php.cn

CSS3 のグラデーションのカテゴリは何ですか?

WBOY

リリース： 2022-03-29 17:23:12

オリジナル

3297 人が閲覧しました

css3 のグラデーションは次のように分類できます: 1. 線形グラデーション、構文は "linear-gradient(gradient Direction, color 1, color 2, ...);"; 2. 放射状グラデーション、構文「radial-gradient(円の種類グラデーションサイズグラデーション位置, カラー 1, カラー 2);」です。

CSS3 のグラデーションのカテゴリは何ですか?

このチュートリアルの動作環境: 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>

ログイン後にコピー

出力結果:

CSS3 のグラデーションのカテゴリは何ですか?

放射状グラデーション

radial-gradient() 関数は、放射状グラデーションを持つ「画像」を作成します。

放射状のグラデーションは中心点によって定義されます。

放射状のグラデーションを作成するには、2 つのストップカラーを設定する必要があります。

CSS 構文

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

ログイン後にコピー

shape 円のタイプを決定します:

ellipse (デフォルト): 楕円の放射状のグラデーションを指定します。

circle: 円の放射状のグラデーションを指定します。

size は、グラデーションのサイズを定義します。可能な値:

##最近接: 円の中心から放射状グラデーションの半径の長さを指定します。
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 サイトの他の関連記事を参照してください。