2012-02-15 11 views
1

CSS私はこれが転がった直線勾配ルール

background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8); 

私は2番目と3番目のparamsを前提とは、グラデーションの開始と終了色ですが、最初のパラメータ「センタートップは」正確に何を意味するのでしょうか?

-moz-linear-gradientが明らかにMozillaに固有であるとすれば、このルールと同等のCSS3標準バージョンは何ですか?

答えて

2

MDNをご覧ください。私が正しく読むと、あなたは接頭辞を拒否することができます。

<側またはコーナー>

勾配線の始点の位置を表します。これは、2つのキーワードで構成されています。最初のものは、左右の横の横を示し、もう1つは縦の横、上または下を示します。順序は関連性がなく、各キーワードはオプションです。

上から下へ、左から右への値は、それぞれ角度0deg、180deg、270deg、90degに変換されます。他は、始点が記述されたコーナーと同じ象限にあり、始点とコーナーで定義された線がグラデーションラインに対して垂直になるような角度に変換されます。こうすることで、color stop>で記述された色がコーナーポイントに正確に適用されます。これは「マジックコーナー」プロパティと呼ばれることもあります。勾配線の終点は、中央ボックスの他の方向の始点の対称点です。すべてのブラウザのために

2

background: #b6d3f4; /* Old browsers */ 
background: -moz-linear-gradient(top, #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* IE10+ */ 
background: linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0); /* IE6-9 */ 
関連する問題