ホームページ > 記事 > ウェブフロントエンド > CSS3 のグラデーションのカテゴリは何ですか?
css3 のグラデーションは次のように分類できます: 1. 線形グラデーション、構文は "linear-gradient(gradient Direction, color 1, color 2, ...);"; 2. 放射状グラデーション、構文「radial-gradient(円の種類 グラデーション サイズ グラデーション位置, カラー 1, カラー 2);」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
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-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 サイトの他の関連記事を参照してください。