CSS3におけるカラー値RGBAとグラデーションカラーについて詳しく解説（写真）

CSS3グラデーションカラー以前画像は背景画像のみを使用できます
CSS3グラデーションカラー構文により、画像のダウンロードコストを節約できます
ブラウザ解像度を変更する際の効果が向上します

カラー値RGBA

RGBカラー標準私たちがよく知っているのは、r (赤)、g (緑)、b (青) の 3 つの色を重ね合わせてさまざまな色を形成することです
値は 0 ～ 255、または 0 ～ 100% です
rgba は rgb に基づいており、 alphaの不透明度パラメータが追加されました

.demo {    width: 100px;    height: 100px;    background-color: rgb(255, 0, 0);}

.demo {    width: 100px;    height: 100px;    background-color: rgba(255, 0, 0, 0.5);}

alphaは0~1の値をとり、値が小さいほど透明度が高くなります

linear gradient Linear-gradient

gradientとは「傾き」、線形という意味です"linear"
グラデーション カラーは、鮮やかな色を形成するための複数のカラー間のスムーズな移行です
線形グラデーション 線形グラデーション パラメーターには、グラデーションの方向 (オプション) と任意の数のグラデーション カラーがあります

.demo {    width: 100px;    height: 100px;    background: linear-gradient(red,lime,blue);}

ここに書いていることに注意してください背景はbackground-colorではありません
(実際には、グラデーションカラーはbackground-imageの関数です)

---

グラデーションの方向を塗りつぶさない場合、デフォルトは上から下です
グラデーションの方向には、次の属性値
があり、上、下 (デフォルト)、左、右
左上、右上、左下、右下
または角度 xxxdeg を入力します
たとえば、左上へは方向を表します

.demo {    width: 100px;    height: 100px;    background: linear-gradient(to top left,red,lime,blue);}

---

角度 0deg は時計回りの回転と同等です

.demo {    width: 100px;    height: 100px;    background: linear-gradient(20deg,red,lime,blue);}

。

---

各色の後ろに各色のグラデーションの位置を追加できます

.demo {    width: 100px;    height: 100px;    background: linear-gradient(red 30%,lime 50%,blue 70%);}

それを入力しない場合、ブラウザはデフォルトでそれを均等に分割します。たとえば、3つの色の値。デフォルトは 0%、50%、100% です

---

また、線形グラデーションを繰り返すことができる、Repeating-linear-gradient という珍しい関数もあります

.demo {    width: 100px;    height: 100px;    background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);}

結果は、非常に醜いグラデーションカラーになります

放射状グラデーション 放射状-gradient

radial は「放射状、放射状」を意味します

外側に放射状に広がるグラデーションの中心です

.demo {    width: 200px;    height: 100px;    background: radial-gradient(red,lime,blue);}

---

は線形グラデーション

に似ていますが、最初のパラメーター (オプション) はグラデーションの形状と放射状グラデーションの位置です
円または楕円を使用できます (デフォルト)

.demo {    width: 200px;    height: 100px;    background: radial-gradient(circle,red,lime,blue);}

---

はい 位置の形状形式を使用して、グラデーションの中心の位置を定義します

.demo {    width: 200px;    height: 100px;    background: radial-gradient(circle at 30% 30%,red,lime,blue);}

---

グラデーションの位置はパーセント形式または単位で指定できますピクセル形式

1 つの値のみを記述する場合、他の値はデフォルトで中央位置の 50% になります

.demo {    width: 200px;    height: 100px;    background: radial-gradient(circle at 30%,red,lime,blue);}

---

グラデーションのサイズ キーワードを使用したくない場合は、数値を使用することもできます

.demo {    width: 200px;    height: 100px;    background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);}

はグラデーションを意味しますサイズ 100px*100px、グラデーション位置 50px*50px

---

放射状グラデーションにもグラデーションを繰り返す機能があります

使い方 線形グラデーションと同様、ここではあまり説明しません

.demo {    width: 200px;    height: 100px;    background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);}

以上がCSS3におけるカラー値RGBAとグラデーションカラーについて詳しく解説（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。