グラデーションの掛け方
グラデーションは２種類の掛け方が有り、１つはlinear-gradient( )関数使った線形グラデーション、もう１つはradial-gradient( )関数を使った放射状グラデションですが、ここでは線形グラデーションに関してのみ記述しています。
線形グラデーション
linear-gradient( )関数でグラデーションラインはボックスの中心と角度（終点または角度）定義し、色は始点と終点に省略可能な中間点で定義します。
終点または角度のどちらも指定が無い場合はディフォルト値として”to bottom”が使われます。
Operaはバージョン11.10からCSSグラデーションをサポートしています。
2017年現在最新の書式
linera-gradient( 開始位置と角度, 開始色 開始位置, 終了色 終了位置);
開始位置と終了位置は省略可能です、省略した場合には”開始位置=0、終了位置=100%"が適用されます。
開始位置と角度を省略すると既定値の”to bottom”が適用されます。
複数の色を指定することもでき、この場合も位置の省略は可能で、省略した場合には均等に割り当てられます。
linera-gradient( 開始位置と角度, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置); （例） background:linear-gradient(to bottom, #fff5ee,#ba55d3,#d8bfd8); background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);
旧バージョンのブラウザの場合
ベンダープレフィックスは最近のフラウザだけを対象にするのであれば、不要だと思いますが、少数派でも旧バージョンのブラウザも対象にしようとすれば必要になります。その書式としては、
gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色)); linear-gradient(開始位置, 開始色 位置, 途中色 位置, 終了色 位置);
の２種類があります。
Chromeの場合
”-webkit-gradient()”の書式は3.0以降で認識されるようですが、”-webkit-linera-gradient()”は10.0以前のバージョンでは認識されません。
background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066)); background: -webkit-gradient(linear, left top, left bottom, from(#fff5ee), color-stop(0.5,#ba55d3), to(#d8bfd8));
background: -webkit-linear-gradient(top, #990, #066); background: -webkit-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);これは、レイアウト P タグのコンテンツです
FireFoxの場合
background: -moz-linear-gradient(top, #990, #066); background: -moz-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
Operaの場合
background: -o-linear-gradient(top, #990, #066); background:-o-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
Internet Exploreの場合
IEの場合では、グラデーションを掛けるにはIE独自の書式となり、色は開始色と終了色の２色だけになるため、”CSS3 PIE”を使います。