css3 線形グラデーション効果_html/css_WEB-ITnose

一部のナビゲーション バーの背景色はグラデーション効果を持つように設計されており、よりレイヤー化され、テクスチャーが表現されています。

CSS3 には、この効果を実現するために特別に設計されたプロパティがあります。

Webkit カーネルを備えた Safari、Chrome の線形グラデーション )基本構文：background-image:-webkit-gradient(type,x1 y1, x2 y2, from (開始カラー値), to (終了カラー値), [color-stop (オフセット 10 進数, 終了カラー値), ... ] );

-webkit-gradient は背景の属性値です。

Webkit カーネルの線形グラデーション (線形グラデーション) パラメータの最初のセット (タイプ) は線形です

パラメータの 2 番目のセット はい、x1 y1、x2 y2、をカラー グラデーションの 2 点の座標として使用します。 x1、x2、y1、y2 の値の範囲は 0% ～ 100% です。x1、x2、y1、y2 の値が極値の場合、x1 と x2 は左 (または 0%) または右の値を取ることができます。 (または 100%)、y1 と y2 は上部 (または 0%) または下部 (または 100%) の値を取ることができます

x1 が x2 に等しく、y1 が y2 に等しくない場合、垂直勾配が達成されます。 y1 と y2 の値を調整できます。

y1 が y2 に等しく、x1 が x2 に等しくない場合、x1 と x2 の値を調整することで、グラデーションの半径サイズを調整できます。 ;

y1 が y2 に等しくなく、x1 が x2 に等しくない場合、角度勾配が達成されます。x1、x2、y1、および y2 の値が極値の場合、垂直勾配または水平方向のグラデーション

x1 が x2 に等しい、y1 が y2 に等しい場合、グラデーションはなく、からの色が取得されます。つまり、「from (色の値)」です。および水平グラデーションの場合、x1 と x2 の最も単純な値は左 (または 0%) または右 (または 100%) であり、y1 と y2 の最も単純な値は上 (または 0%) または下 (または 100) です。 %);

from (開始カラー値)、to (終了カラー値) は 2 つのグラデーション カラー値です。 -stops を使用できます。グラデーションに 2 色しかない場合、このパラメーターを使用する必要はありません。オフセット >= 1 の場合、カラーストップは無効と同等です。

Firefox での線形グラデーション (線形グラデーション) については、以下を参照してください。

グラデーション フィルターは、IE で使用できます。以下を参照してください: http://msdn.microsoft.com/en- us/library/ms532997(VS.85) ).aspx

ブラウザの互換性:

Safari4Safari 4をサポート

Firefox 3.6をサポート

Opera 10.5+をサポートしません

ChromeChromeをサポート

IE8Internet Explorerをサポートしません

ツールを使用する

最終的な効果をリアルタイムでプレビューできる、非常に使いやすいデザイン ツールです

ツールのアドレス: http://www.css88.com/tool/css3Preview/Linear-Gradients.html