渐变文本跨浏览器

Question

我正在尝试制作一个水平渐变的菜单栏。我使用 -webkit-background-clip 取得了一些成功，但这在 Firefox 中不起作用。

我找到了一个跨浏览器兼容的 jQuery 插件 pxgradient，但我无法让它跨越几个 li 元素的渐变。请参阅以下 jsfiddle：

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>

虽然这看起来太过分了，但一定有更简单的解决方案吗？此外，与字符数少的元素相比，字符数多的元素的渐变速度相对较慢。这可能可以通过计算每个元素的字符数来解决，但这一切看起来效率很低。

Answer 1

一个简单的解决方案，可以在 FF、Chrome 和 Safari 中使用混合模式。

诀窍是渐变设置在a下，在ul.

设置 mix-blend-mode: screen，这种颜色只会显示在黑色的地方（文本，悬停时的边框）

ul {
    display: inline-block;
    padding: 0;
    font-size: 30px;
    font-weight: bolder;
    background: linear-gradient(90deg, red, blue);
}
li {
    mix-blend-mode: screen;
    background-color: white;  
    box-shadow: 8px 0px 0px white;
}
li, li a {
    display: inline-block;
    text-decoration: none;
    border-bottom: 3px solid white;
}
li:hover a {
    border-bottom: 3px solid black;
    text-shadow: 0px 0px 2px gray;
}

<div class="navigation">
 <ul>
  <li><a href="#">Nav 1</a></li>
  <li><a href="#">Nav 2</a></li>
  <li><a href="#">Nav 3</a></li>
  <li><a href="#">Nav 4</a></li>
  <li><a href="#">Nav 5</a></li>
 </ul>
</div>

渐变文本跨浏览器

Gradient text cross browser

html

css

jquery

gradient