CSS3チュートリアル(10)：CSS3 HSLステートメント設定 Color_css3_CSS_Webページ制作

Webjx 記事の紹介: CSS3 HSL ステートメントの使用は、色の設定にも使用されます。次は何ですか？ HSLA? はい、これは RGBA と同じ効果があります。 色は CSS3 HSL 宣言を使用して設定することもできます。次は何ですか？ HSLA? はい、これは RGBA と同じ効果があります。 前の記事

CSS3の使用 HSL宣言は色の設定にも使用されます。次は何ですか？ HSLA? はい、これは RGBA と同じ効果があります。
CSS3の使用 HSL宣言は色の設定にも使用されます。次は何ですか？ HSLA? はい、これは RGBA と同じ効果があります。
前回の記事: CSS3 チュートリアル (9): RGB カラーの設定
HSL ステートメントは色相(H)、彩度(s)、明度(L) を使用して色を設定します。
色相はカラー ホイールから派生します。0 と 360 は赤、120 に近い値は緑、240 は青です。
彩度の値はパーセンテージです: 0% はグレースケール、100% は最高の彩度です
明度の値もパーセンテージです: 0% が最も暗く、50% が平均、100% が最も明るいです。
雑感: なぜ「軽さ」なのか?たぶん、私は Photoshop の「明るさ」に慣れているかもしれません...
ブラウザの互換性:
現在、HSL と HSLA は Firefox、Google Chrome、Safari ブラウザで十分にサポートされており、プレフィックス CSS3 HSL は必要ありません

上記のデモは次のスタイルで実装されています
div.hslL1 {background:hsl(320, 100%, 50%); height:20px; % ); 高さ:20px; } div.hslL3 { 背景:hsl(320, 100%, 75%); } div.hslL4 { 背景:hsl(202, 100%, 50%); ; } div.hslL5 { 背景:hsl(202, 50%, 50%); 高さ:20px; } div.hslL6 { 背景:hsl(202, 100%, 75%); }

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2. 1 ウィンドウ...) CSS3 HSLA

上記の効果は、次のスタイルによって実現されます。 hslaL2 { 背景: hsla(165, 35%, 50%, 0.4); 高さ: 20px; } div.hslaL3 { 背景: hsla(165, 35%, 50%, 0.6); }背景:hsla(165, 35%, 50%, 0.8); 高さ:20px; } div.hslaL5 { 背景:hsla(165, 35%, 50%, 1.0) }

ブラウザのサポート: Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 Windows …)

上記は、CSS3 チュートリアル (10): CSS3 HSL ステートメントの設定 Color_css3_CSS_Web ページの作成の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。