CSS3の新機能まとめ(カラー)_html/css_WEB-ITnose

Color:

CSS3 には、色の値を作成するための hsl()、hsla()、rgb()、rgba() という 4 つの新しい関数が追加されました。 s (彩度)、l (明るさ);

色相: 0 ～ 360 の値です [実験後は小数にすることができます];

彩度と明るさ: 両方ともパーセンテージです

下の画像はhttp://www.w3.org/wiki/CSS/Properties/color/HSL

明るさが 100% の場合は白、明るさが 0% の場合は黒になります。は 100%、明るさは 50% 生成される色はすべて Web セーフカラーです

rgb():

rgb 関数: r(赤)、g(緑)、b(青)[コンピューターの三原色];

値は 0 ～ 255 の任意の整数またはパーセンテージにすることができます ;

範囲外の場合は、最も近い有効な値を採用します:

em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

下の画像は http://www.w3.org から取得したものです/wiki/CSS/Properties/color/RGB

注意すべき点が 1 つあります。 パーセンテージと数値を rgb 関数に同時に使用することはできません

rgba() と hsla():

違いこれら 2 つと上の 2 つの間は、後ろの (アルファ) の透明度です

透明度は 0 から 1 の間です。0 は完全に透明、1 は完全に不透明です。透明度を使用してさまざまな美しいものを作成できます。効果

簡単な例 (もちろん、この例はあまり見栄えがよくありません)

上の例では A が使用されました 変数に似た単語 (currentColor [大文字と小文字を区別しない])

currentColor はすべての言語で使用できますcolor 属性が設定されている場所

値は、現在の要素の color 属性値です。親をルート要素まで探します。何も設定されていない場合でも、心配する必要はありません。

w3 公式には、要素の color 属性の値が 'color:inherit' とみなされます

より実用的な場所の 1 つは、要素の境界線の色、色 (色) などの属性を設定する場合は、後続の変更を行うときに色 (色) を設定するだけで済み、サブ要素も直接継承して使用できます。 currentColor ですが、子要素が宣言された color 属性値を表示しないようにする必要があります

値の範囲 [0-100] には 2 つの長さ単位 (vw、vh) も使用されます

100vw は画面の幅です。

100vh は画面の高さです。

また、vmax と xmin という 2 つの値があり、それぞれ幅と高さの最大値または最小値を取得します。

vw と vh は calc() の計算に参加できます。

ところで、不透明度を導入しましょう:

不透明度は要素の透明度を設定するために使用されます: (値 0-1)

IE8 は透明度を実現するために代替

 filter:Alpha(opacity=50) /*0-100*/

を使用できます。すべての色で、間違いや追加がある場合はご指摘ください (透明は無視してください...)