CSS - 如何绘制多色线？ [英] CSS - How to Draw a Multi-Coloured Line?

问题描述

我有一个导航栏，对于一个特定的元素，而不是默认的白色下划线，我想使用5种颜色的线条，并想知道这是否可能？

I have a navbar and for a particular element, instead of the default white underline I wish to colour the line using 5 colours and was wondering if this was possible?

结构如下：

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 >

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

小提琴

Fiddle

http：// jsfiddle .net / SMrYF /

颜色代码

#a3ad24
#4594cc
#c4262e
#d9709c
#ffa100

任何帮助都非常感激。

UPDATE

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

mockup can be found here: http://img59.imageshack.us/img59/2866/navbarf.jpg

推荐答案

纯CSS2选项

使用伪元素。向 .current_page_item （或 li position：relative; >如果你计划使用这个为悬停）。然后...

Pure CSS2 Option

Utilize pseudo-elements. Add position: relative; to the .current_page_item (or li if you plan on using this for the hover). Then...

新答案（解决IE错误）

以下代码产生了这个小提示中看到的结果。它与原始答案不同，它使伪元素使用自己的底部边框来制作颜色，而不是伪元素的 background-color 。这似乎已经解决了IE的愚蠢。

Adding the following code yields the results seen in this fiddle. It differs from the original answer by having the pseudo-elements use their own bottom border to make the colors rather than the background-color of the pseudo-element. This seems to have resolved IE's stupidity.

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

height：3px ）

Original Answer (had bug in IE because it cannot seem to understand height: 3px)

添加以下代码（不确定是否需要 hover 代码为当前页或不是，但我包括如果需要）产生结果见这个小提示：

Adding the following code (not sure if you need the hover code for the current page or not, but I included if needed) yields the results seen in 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 在某些点。

NOTE: I've noticed IE seems to have issues being intelligent enough to determine the difference between 3px and 4px height in some cases, which causes an annoying misalignment of 1px at certain points.

这篇关于CSS - 如何绘制多色线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！