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 之后 - 我不能使用这个 mixin，因为 FireFox 16 使用没有 prefix 的线性渐变-moz。

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

0deg, 90deg— 不能跨浏览器工作，因为在所有浏览器中90deg它的方向是从下到上，但在 FireFox 16 中它是从右到左。

关于新方向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 回答