Css3で線形グラデーション効果を実現_html/css_WEB-ITnose

-webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#3B90FF), color-stop(0.5,#0A0FA6))

webkit kernel safari、Chrome Basic線形グラデーションの構文:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始カラー値),to(終了カラー値), [color-stop(オフセット 10 進数) , ドックカラー値), ...] );

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

Webkit カーネルの線形グラデーション (線形グラデーション) パラメータのタイプ (type) の最初のセットは線形です。は、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 つのグラデーション カラー値です

[color-stop (オフセット , 終了カラー値), ...]: 複数のカラーストップ;グラデーションに 2 色しかない場合、このパラメータを使用する必要はありません。オフセット >= 1 の場合、カラーストップは無効と同等です。ツールのアドレス: http://www.css88.com/tool/css3Preview/Linear-Gradients.html