効率的なCSS開発の実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(3) Linear Gradient_html/css_WEB-ITnose

線形グラデーションでは、方向、開始色、終了色の 3 つのパラメータ値を設定できます。最も単純なモードでは、開始色と終了色を定義するだけでよく、開始色、終了色、方向はデフォルトで要素の上から下に設定されます。以下に例を示します。

.test{  background:linear-gradient(red, blue);}

上記のコードの効果を図 5.9 に示します。

図 5.9 最も単純な線形グラデーション効果

一部の古いバージョンのブラウザ (IE を除く) で図 5.9 のような効果を通常表示したい場合は、互換性のあるコードを追加する必要があります:

.test {  background:-webkit-linear-gradient(red, blue);             /*webkit核心浏览器兼容代码*/  background:-o-linear-gradient(red, blue);                       /*Opera浏览器兼容代码*/  background:-moz-linear-gradient(red, blue);                 /*Firefox 浏览器兼容代码*/  background:linear-gradient(red, blue);                             /*标准语法要放在最后 */}

次の例のように、線形グラデーションではグラデーションの方向を指定できます。

.test {  background:-webkit-linear-gradient(left, red, blue);      /*webkit核心浏览器兼容代码*/  background:-o-linear-gradient(left, red, blue);                /*Opera浏览器兼容代码*/  background:-moz-linear-gradient(left, red, blue);                   /*Firefox 浏览器兼容代码*/  background:linear-gradient(to right, red, blue);             /*标准语法要放在最后 */}

上記のコードの効果は、左から右へのパラメーターを設定した後、グラデーションの方向が変わります。上から下へ。

図 5.10 開始点の指定

注: 標準の書き込み方法のグラデーション方向形式は、上の例では「右へ」を使用します。Firefox および Opera ブラウザーでは right を使用し、Webkit の場合は right を使用します。コアブラウザの場合は、開始位置を左で表します。

グラデーションの方向は角度で表現することもできます。0 度、90 度、180 度、270 度は、それぞれ上、右、下、左に対応します。例:

.test {  background:-webkit-linear-gradient(45deg, red, blue);          /*webkit核心浏览器兼容代码*/  background:-o-linear-gradient(45deg, red, blue);                            /*Opera浏览器兼容代码*/  background:-moz-linear-gradient(45deg, red, blue);             /*Firefox 浏览器兼容代码*/  background:linear-gradient(45deg, red, blue);                       /*标准语法 */}

効果は図 5.11 に示されています。 。

図 5.11 グラデーションの方向を 45° に指定します

線形グラデーションは 2 色のグラデーションをサポートするだけでなく、任意の色を追加することもできます。たとえば、線形グラデーションを使用して虹効果を構築することもできます。図 5.12 に示すように。

図 5.12 虹色

図 5.12 に示す虹色の効果コードは次のとおりです。