ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 のグラデーションのカテゴリは何ですか?

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

WBOY
WBOYオリジナル
2022-03-29 17:23:123227ブラウズ

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 は、グラデーションのサイズを定義します。可能な値:

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。