2

次のような線形グラデーションに mixin を使用します。

.linear-gradient (@color1:#ccc, @color2:#fff, @stop1:0, @stop2:100%, @dir:top) {
    background-color: @color2;
    background: -webkit-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:    -moz-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:     -ms-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:      -o-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:         linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    filter: e(%       ("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @color1, @color2));
}

これまでのところうまくいきました..しかし、w3cがグラデーションの新しい正しい方向を公開し、 MozillaがFireFoxを16.0.1に更新した後、FireFox 16はプレフィックスなしの線形グラデーションを使用するため、このミックスインを使用できません-moz。

今は使用できません- 方向が正しくない.linear-gradient(#ffffff, #000000, 0, 100%, top)ため、上から下へtopの正しい線形グラデーションは です。to bottom

0deg, — すべてのブラウザでは下から上への方向ですが、FireFox 16 では右から左への方向で90degあるため、クロス ブラウザでは機能しません。90deg

新しい方向性についてhttps://hacks.mozilla.org/2012/07/aurora-16-is-out/

アイデアはありますか？

4

1 に答える 1

1

ローカル変数を使用し、新しい向きをまだサポートしていないブラウザーに 90 度を追加すると、うまくいくはずです。

(度の操作が機能しなかったのは jsFiddle だけでした)。

.linear-gradient(@color1:#ccc, @color2:#fff, @stop1:0, @stop2:100%, @deg:0deg) {
  @old-deg: @deg + 90deg;
  background-color: @color2;
  background: -webkit-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:    -moz-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:     -ms-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:      -o-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:         linear-gradient(@deg, @color1 @stop1, @color2 @stop2);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";
}

.test {
  width:100px;
  height:100px;
  .linear-gradient(#000, #ff0, 0, 100%, 0deg);
}

(IE 行のエスケープ構文を変更したことに注意してください)。

于 2012-10-24T18:20:29.663 に答える