0

私のモバイルサイトのブランディングとインラインで実行されている右上隅のアンカーを調べると、Firefox の接頭辞 moz でスタイル設定されています。

www.test-bed.co.uk/mobile/

background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;

IE、Opera、および webkit プレフィックスを使用して、クロス ブラウザー グラデーション ソリューションを実現する同様の方法があるかどうか尋ねてもよろしいですか?

4

3 に答える 3

2

最新のすべてのブラウザーのCSSグラデーションルール生成を自動化するオンラインツール：小さなリンク。

しかし、一般的に、主な構文は次のとおりです。

background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/
于 2012-09-03T19:29:43.377 に答える
0

CSS3をご覧ください。私は個人的に彼らのインデントスタイルが好きです。

.box-gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}

ご覧のとおり、 IE10はW3C構文をすぐにサポートする-ms-ため、プレフィックスは必要ありません。！に正しいW3C構文を使用していることを確認してください。linear-gradient()

于 2012-09-03T19:50:42.067 に答える
0

ブラウザとしてFirefoxを使用している場合。その場合は、colorzilla というアドオンを使用することをお勧めします。カラー ピッカー、スポイト、パレット ブラウザー、CSS グラデーション ジェネレーター、Web ページ DOM コード アナライザー、最後の要素の検査、ズームなどのオプションが付属する便利なツールです。

ただし、次のリンクで css グラデーションを生成できます。

http://www.colorzilla.com/gradient-editor/

于 2012-09-03T20:15:00.247 に答える