Question

我使用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发布新的correct direction for gradients和Mozilla更新FireFox到16.0.1之后 - 我无法使用此mixin，因为FireFox 16使用没有前缀{{1}的线性渐变}。

现在我无法使用-moz，因为.linear-gradient(#ffffff, #000000, 0, 100%, top) - 方向不正确，现在正确的线性渐变从上到下是top。

to bottom，0deg - 无法跨浏览器工作，因为在所有浏览器中90deg它的方向是从下到上，但在FireFox 16中它是从右到左。

关于新方向https://hacks.mozilla.org/2012/07/aurora-16-is-out/

有什么想法吗？

Answer 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行上更改了转义语法）。

较少的线性梯度mixin

1 个答案: