一段时间以来,我一直在尝试让我的代码适用于以下所有浏览器前缀。这就是我想出的。有人可以告诉我这是否是使用 Less 对渐变进行编码的正确方法?特别是我对 -webkit-linear-gradient 感到困惑,因为我找不到如何使用规范来做到这一点。
我的 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 - 这是设置具有两个色标的 CSS 渐变的正确方法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14055972/