【CSS3】-カラーRGBAとグラデーションカラー_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:45:53
オリジナル
1738 人が閲覧しました

色のRGBA

RGBとは、赤(R)、緑(G)、青(B)を変化させ重ね合わせて得られる様々な色の色の規格です。 RGBA は RGB に基づいており、アルファの透明度を制御するパラメーターを追加します。

構文:

color:rgba(R,G,B,A)
ログイン後にコピー

3 つのカラー パラメーター R、G、および B。正の整数値の値の範囲は: 0 ~ 255 です。

パーセンテージ値の値の範囲は: 0.0% - 100.0%です。範囲外の値は、最も近い値の制限に丸められます。すべてのブラウザがパーセンテージ値の使用をサポートしているわけではありません。

A は透明度パラメータであり、値は 0 から 1 の間であり、負の値にすることはできません。

コード例:

background-color:rgba(100,120,60,0.5);
ログイン後にコピー

グラデーションカラー

CSS3 グラデーション線形グラデーション(linear)放射状グラデーション(radial)に分かれています。レンダリング エンジンが異なると、グラデーションを実装するための構文が異なるため、ここでは線形グラデーションの W3C 標準構文に基づいてその使用法のみを分析します。残りについては関連情報を参照してください。 W3C 構文は、IE10 以降、Firefox19.0 以降、Chrome26.0 以降、Opera12.1 以降などのブラウザでサポートされています。

このセクションでは、線形グラデーションについて説明します:

パラメータ:

最初のパラメータ: グラデーションの方向を指定します、キーワード「angle」または」 English" を表す:

(画像をクリックすると拡大します)

最初のパラメータが省略された場合、デフォルトは "180deg" で、これは "tobottom" に相当します。

2 番目と 3 番目のパラメーター は、色の開始点と終了点を表します は、複数の色の値を持つことができます。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
ログイン後にコピー

レンダリング:

 例子
ログイン後にコピー

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>Gradient</title><style type="text/css">p {  width: 400px;  height: 150px;  line-height: 150px;  text-align:center;  color: #000;  font-size:24px;  background-image:linear-gradient(to top left,red,green,blue,yellow,black,white);} </style></head> <body>  <p>右下角向左上角的线性渐变背景</p></body></html>
ログイン後にコピー

効果:

 
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!