Question

我有一个导航栏和一个特定的元素，而不是默认的白色下划线我希望用5种颜色为这条线着色，并想知道这是否可行？

结构如下：

HTML

<div id="underlinemenu" class="clearfix">
    <ul>
        <li class="page_item page-item-67">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-69 current_page_item">
            <a href="#">The Blogs</a>
        </li>
        <li class="page_item page-item-60">
             <a href="#">Meet the Bloggers</a>
        </li>
        <li class="page_item page-item-2">
            <a href="#">Gallery</a>
        </li>
    </ul>
</div>

CSS

#underlinemenu{
    padding:0;
    margin:0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul{
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -14px 0 -30px 0;
}


#underlinemenu ul li{
    display: inline;
    float: left;
    color: #ffffff;
    padding: 21px 40px 0px 8px; 
}

#underlinemenu ul li a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover{
    color: #ffffff;
    padding-bottom: 16px;
    border-bottom: 3px solid #ffffff;
}

.current_page_item {
    color: #ffffff;
    padding: 21px 10px 16px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 3px solid #ffffff;
}

小提琴

http://jsfiddle.net/SMrYF/

颜色代码

#a3ad24
#4594cc
#c4262e
#d9709c
#ffa100

非常感谢任何帮助。

更新

模型可以在这里找到：http://img59.imageshack.us/img59/2866/navbarf.jpg

Answer 1

-snip上一个答案 -

好的，所以我想出了另一种解决方案。我使用了位于每个li底部的五个div，宽度为20％。看起来像一个丑陋的解决方案，但嘿，它的工作原理！

http://jsfiddle.net/VdMPL/6/

Answer 2

一些选项

添加bg图像而不是底部边框（使用静态图像文件）。
为bg图像添加线性渐变（IE9及更早版本不支持）。
使用border-image样式（IE9及更早版本不支持）。

如果超链接不是固定宽度，您可以设置background-size（IE9及更早版本不支持），或者为每个超链接添加img标签（静态地，或使用JS或jQuery）并进行缩放至100％宽度和固定高度。

使用线性渐变将涉及定义10个渐变点（每种颜色2个）（假设可以指定多于2个渐变点）。

Answer 3

纯CSS2选项

利用伪元素。将position: relative;添加到.current_page_item（或li，如果您打算将其用于悬停）。然后...

新答案（解决IE错误）

添加以下代码会产生this fiddle中显示的结果。它与原始答案的不同之处在于，伪元素使用自己的底部边框来制作颜色而不是伪元素的background-color。这似乎解决了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中有错误，因为它似乎无法理解height: 3px）

添加以下代码（不确定您是否需要当前页面的hover代码，但如果需要，我会包含该代码）会产生this fiddle中显示的结果：

.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;
}

注意：我注意到IE似乎有足够的智能来确定3px和4px高度之间的差异，这会导致恼人的错位1px在某些点。

Answer 4

你也可以做一些不圣洁的事情并使用CSS Gradients。以下是Safari / Chrome中唯一的作品：http://jsfiddle.net/ASLs3/1/

但正如其他人所说，你应该只使用背景图片。

CSS - 如何绘制多色线？

4 个答案:

纯CSS2选项