【发布时间】：2015-06-18 23:49:12
【问题描述】：
我正在尝试制作具有水平渐变的菜单栏。我使用 -webkit-background-clip 取得了一些成功，但这在 Firefox 中不起作用。
我找到了一个跨浏览器兼容的 jQuery 插件 pxgradient，但我无法让它跨越多个 li 元素的渐变。请参阅以下 jsfiddle：
http://jsfiddle.net/vnv4nyhj/10/
function gradient1() {
$(".test").pxgradient({
step: 10,
colors: ["#ff0066", "#2850FF"],
dir: "x"
});
};
我希望渐变更像顶部的渐变。理想情况下，我希望边框底部在悬停时包含相同的渐变，但我可能生活在一个没有它的世界中。
PS-font-awesome 图标之所以存在只是因为它之前给我带来了问题，所以我现在加入以确保它有效。
更新： 我正在使用的另一个可能的想法是读取元素的数量，然后划分每个元素的颜色并使用 nth-child() 选择器分配每种颜色。
<script>
//Get number of list items
var menuItems = $("li").children().length;
//Convert colors to hex
hexString1 = '2850FF';
hexString2 = 'FF0066';
color1 = parseInt(hexString1, 16);
color2 = parseInt(hexString2, 16);
//Calculate difference in colors and color step
colorDifference = color2 - color1;
colorStep = colorDifference / (menuItems - 1);
colorStep = parseInt(colorStep);
//Loop through elements and apply gradients
for (i = 0; i < menuItems; i++) {
newColor1 = color1 + (i * colorStep);
newColor2 = color1 color2 -1;
gradientStart = newColor1.toString(16);
gradientEnd = newColor2.toString(16);
//use gradientStart and gradientEnd as colors in the function, not sure on this part yet
}
</script>
这似乎太过分了，必须有一个更简单的解决方案？此外，与具有几个字符的元素相比，具有许多字符的元素将具有相对较慢的渐变。这可以通过计算每个元素的字符数来解决，但这一切似乎都相当低效。
【问题讨论】：
-
嗯，弄乱了你的小提琴我从链接中删除了 HREF 属性，这使得文本看起来像你想要的但是当我在 pxgradiant 调用之后尝试注入 URL 并且它不起作用。 You can see here如果找到解决方法或其他方式，我会告诉你。
-
感谢您的浏览。我有一个不同的想法，但我怎样才能用常规编辑回答我自己的问题？ stackoverlow 的老读者，第一次发海报。
-
@Robert 如果您需要澄清一些问题，请编辑您的问题。编辑“按钮”位于标签下方，如果您找不到它。