CSS-如何绘制多色线？

我有一个导航栏，对于一个特定的元素，我想用5种颜色来代替默认的白色下划线，我想知道这是否可行

结构如下：

HTML

​

拨弄

色码

非常感谢您的帮助

更新

模型可以在这里找到：

-snip前面的答案-

好的，所以我想出了另一个解决方案。我使用了五个div，位于每个li的底部，宽度为20%。这似乎是一个丑陋的解决方案，但嘿，它奏效了

-截取先前的答案-

好的，所以我想出了另一个解决方案。我使用了五个div，位于每个li的底部，宽度为20%。这似乎是一个丑陋的解决方案，但嘿，它奏效了

一些选择

使用静态图像文件添加bg图像，而不是底部边框。 为IE9及更早版本不支持的bg图像添加线性渐变。 使用IE9及更早版本不支持的边框图像样式。 如果超链接不是固定宽度，您可以设置IE9和更早版本不支持的背景大小，或者静态地向每个超链接添加img标记，或者使用JS或jQuery并将其缩放到100%宽度和固定高度

使用线性渐变需要为每种颜色定义10个渐变点2，假设可以指定2个以上的渐变点。

一些选项

使用静态图像文件添加bg图像，而不是底部边框。 为IE9及更早版本不支持的bg图像添加线性渐变。 使用IE9及更早版本不支持的边框图像样式。 如果超链接不是固定宽度，您可以设置IE9和更早版本不支持的背景大小，或者静态地向每个超链接添加img标记，或者使用JS或jQuery并将其缩放到100%宽度和固定高度

使用线性渐变需要为每种颜色定义10个渐变点2，假设可以指定2个以上的渐变点。

Pure CSS2选项 利用伪元素。添加位置：相对位置；如果您计划将其用于悬停，请转到.current_page_项或li。然后

新答案解决IE漏洞

添加以下代码将产生中显示的结果。它与原始答案的不同之处在于，伪元素使用其自己的底部边框来生成颜色，而不是伪元素的背景色。这似乎解决了IE的愚蠢问题

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    bottom: -3px;
    left: 20%;
    border-bottom: 3px solid #4594cc;
}

.current_page_item:after {    
    left: 40%;
    border-bottom-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;    
    border-bottom-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;    
    border-bottom-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {   
    border-bottom-color: #ffffff;
}

最初的答案在IE中有缺陷，因为它似乎无法理解高度：3px

添加以下代码不确定您是否需要当前页面的悬停代码，但如果需要，我将其包括在内，结果如下所示：

注意：我注意到IE在某些情况下，在智能化程度足以确定3px和4px高度之间的差异时，似乎存在一些问题，这会导致在某些点上1px出现令人恼火的错位。

Pure CSS2选项 利用伪元素。添加位置：相对位置；如果您计划将其用于悬停，请转到.current_page_项或li。然后

新答案解决IE漏洞

添加以下代码将产生中显示的结果。它与原始答案的不同之处在于，伪元素使用其自己的底部边框来生成颜色，而不是伪元素的背景色。这似乎解决了IE的愚蠢问题

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    bottom: -3px;
    left: 20%;
    border-bottom: 3px solid #4594cc;
}

.current_page_item:after {    
    left: 40%;
    border-bottom-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;    
    border-bottom-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;    
    border-bottom-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {   
    border-bottom-color: #ffffff;
}

最初的答案在IE中有缺陷，因为它似乎无法理解高度：3px

添加以下代码不确定您是否需要当前页面的悬停代码，但如果需要，我将其包括在内，结果如下所示：

---

注意：我注意到IE在某些情况下，在智能化程度足以确定3px和4px高度之间的差异时，似乎存在一些问题，这会导致在某些点上1px出现令人讨厌的错位。

你也可以做一些不神圣的事情，并使用CSS渐变。这是一把拼凑在一起的小提琴，是Safari/Chrome中唯一的作品：

---

但正如其他人所说，你可能只需要使用背景图像。

你也可以做一些不神圣的事情，使用CSS渐变。这是一把拼凑在一起的小提琴，是Safari/Chrome中唯一的作品：

---

但正如其他人所说，您可能只需要使用背景图像。

一个模型图像可以准确地显示您试图实现的目标，这会很有帮助。@MattCoughlin-用一个模拟的方式更新了这个问题，最好的选择是使用背景图像。@BramVanroy谢谢，我原以为会是这样，但我只是想知道这在css中是否可行。一个模型图像显示您正试图实现的目标会很有帮助。@MattCoughlin-用一个最具模拟性的赌注更新了这个问题，即使用背景图像。@BramVanroy谢谢，我原以为会是这样，但只是想知道在css中是否可能。谢谢，很抱歉没有正确解释，我指的是由5种颜色组成的一行-我已经用一个模型更新了这个问题，让你看看。这个问题很可爱。@Tom，我想这是一个不错的解决方案

---

这就解决了问题；尽管我建议通过jQuery为instance@skip405这似乎是必要的邪恶，因为需要打败IE6无疑是的恶魔恐怖。为你们更新了一些快速jQuery:-Pthanks，很抱歉没有正确解释，我指的是一条由5种颜色组成的线——我用一个模型更新了这个问题，让你看。这个问题很可爱。@Tom，我想说解决这个问题的办法不错；尽管我建议通过jQuery为instance@skip405这似乎是必要的邪恶，因为需要打败IE6无疑是的恶魔恐怖。为你们更新了一些快速jQuery:-P

#a3ad24
#4594cc
#c4262e
#d9709c
#ffa100

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    bottom: -3px;
    left: 20%;
    border-bottom: 3px solid #4594cc;
}

.current_page_item:after {    
    left: 40%;
    border-bottom-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;    
    border-bottom-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;    
    border-bottom-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {   
    border-bottom-color: #ffffff;
}

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 3px;
    width: 20%;
    bottom: -3px;
    left: 20%;
    background-color: #4594cc;
}

.current_page_item:after {    
    left: 40%;
    background-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;
    background-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;
    background-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {
    background-color: #ffffff;
}