这是设置带有两个颜色停止点的CSS渐变的正确方法吗？

我已经尝试了一段时间，使我的代码与下面所有的浏览器前缀一起工作。这就是我想到的。有人能告诉我这是不是用更少的代码编写渐变的正确方法吗？特别是我对-webkit线性渐变感到困惑，因为我找不到如何使用规范来实现这一点

我的less代码：

.setTopGradient(@startClr, @endClr, @st1Clr, @st1Pos, @st2Clr, @st2Pos) {
   @st1PosPercent: @st1Pos * 100%;
   @st2PosPercent: @st2Pos * 100%;

   background: -moz-linear-gradient(
        top,
        @startClr,
        @st1Clr @st1PosPercent,
        @st2Clr @st2PosPercent,
        @endClr
   );

   background: -webkit-gradient(
        linear, 
        left @startClr,
        left @endClr, 
        color-stop(@st1Pos, @st1Clr),
        color-stop(@st2Pos, @st2Clr)
   );

   background: -webkit-linear-gradient(
      linear,
      left top,
      left bottom,
      from(@startClr),
      to(@endClr),
      color-stop(@st1Pos, @st1Clr),
      color-stop(@st2Pos, @st2Clr)
   );

    background: -ms-linear-gradient(
        @startClr 0%,
        @st1Clr @st1PosPercent,
        @st2Clr @st2PosPercent,
        @endClr 100%
    );

    background: -o-linear-gradient(
        @startClr 0%,
        @st1Clr @st1PosPercent,
        @st2Clr @st2PosPercent,
        @endClr 100%
    );

    background: linear-gradient(
        to @endClr,
        @st1Clr @st1PosPercent,
        @st2Clr @st2PosPercent,
        @endClr 100%
    );

}

样本输入：

.setTopGradient(#8b8b8b,#bfbfbf,#a9a9a9,0.1,#bdbdbd,0.3);

输出CSS：

  background: -moz-linear-gradient(top, #8b8b8b, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf);
  background: -webkit-gradient(linear, left #8b8b8b, left #bfbfbf, color-stop(0.1, #a9a9a9), color-stop(0.3, #bdbdbd));
  background: -webkit-linear-gradient(linear, left top, left bottom, from(#8b8b8b), to(#bfbfbf), color-stop(0.1, #a9a9a9), color-stop(0.3, #bdbdbd));
  background: -ms-linear-gradient(#8b8b8b 0%, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf 100%);
  background: -o-linear-gradient(#8b8b8b 0%, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf 100%);
  background: linear-gradient(to #bfbfbf, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf 100%);

---

在回答这个问题时，让你的止损点只是百分比（没有小数），这样这些线

  background: -webkit-gradient(linear, left #8b8b8b, left #bfbfbf, color-stop(0.1, #a9a9a9), color-stop(0.3, #bdbdbd));
  background: -webkit-linear-gradient(linear, left top, left bottom, from(#8b8b8b), to(#bfbfbf), color-stop(0.1, #a9a9a9), color-stop(0.3, #bdbdbd))

…变成

  background: -webkit-gradient(linear, left #8b8b8b, left #bfbfbf, color-stop(10%, #a9a9a9), color-stop(30%, #bdbdbd));
  background: -webkit-linear-gradient(linear, left top, left bottom, from(#8b8b8b), to(#bfbfbf), color-stop(10%, #a9a9a9), color-stop(30%, #bdbdbd))

---

使用不同的浏览器

喜欢吗？试试在线css gradient generator，或者如果您仍然手动编写任何供应商前缀，那么使用较少的原因是什么？此外，您在W3C规范中找不到旧的Webkit格式，因为它没有在CSS规范中使用–这是Webkit的工作草案。请参见第410行：@feeela-您能解释一下您的意思吗。你是说我不需要为包含-webkit线性渐变而烦恼，因为它并没有真正被使用。非常感谢。