twitter-bootstrap bootstrap 导航栏顶部边框不同颜色

bootstrap navbar top border different colors

提问by meoww-

I've been using Bootstrap lately and I have seen a technique which I would like to mimic. In my top navbar, I would like to have a border appear when the user hovers over or clicks on one of the links. An example of this can be seen below:

我最近一直在使用 Bootstrap，我看到了一种我想模仿的技术。在我的顶部导航栏中，当用户将鼠标悬停在其中一个链接上或单击其中一个链接时，我希望出现一个边框。下面是一个例子：

As you can see, not only does the background color change, but the border above it also changes. I need a bit of help setting something like this up. I have tried to create this effect by doing the following:

如您所见，不仅背景颜色发生了变化，其上方的边框也发生了变化。我需要一些帮助来设置这样的东西。我试图通过执行以下操作来创建这种效果：

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
 color: white;
 background-color: gray;
 border-top: 6px solid darkgray;
 }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white;
background-color: gray;
border-top: 6px solid darkgray;
}

This seems to kind of get me on the right track, but I feel as if the effect is still quite off. For starters, using the above code, when I hover over a navbar item, the text alignment is wrong. I also believe that there could be a better way to create the two color effect (dark gray on the top / light gray on the background / when a user hovers).

这似乎让我走上了正确的轨道，但我觉得效果仍然很差。对于初学者，使用上面的代码，当我将鼠标悬停在导航栏项目上时，文本对齐方式是错误的。我也相信可能有更好的方法来创建两种颜色效果（顶部深灰色/背景浅灰色/当用户悬停时）。

Has anyone created an effect like this? If so, please shed some light on the subject! Thanks.

有没有人制作过这样的效果？如果是这样，请阐明这个主题！谢谢。

采纳答案by Harry

You can use an inset box-shadowto achieve the effect like shown below:

您可以使用插图box-shadow来实现如下所示的效果：

CSS:

CSS：

.navbar-default{ /* assigning the top bar to the entire navbar div element */
    text-align: center;
    box-shadow: inset 0px 6px 0px #777; /* initial gray color to the top bar */   
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
    background-color: #AAA;
    box-shadow: inset 0px 6px 0px #000; /* switch to a darker color on hover */
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: gray;
    box-shadow: inset 0px 6px 0px #AAA; /* switch to a lighter color for active element */
}

Demo Fiddle with Basic HTML Structure| Demo with Bootstrap's Default HTML

演示小提琴基本 HTML 结构| 使用 Bootstrap 的默认 HTML 进行演示

回答by Jairo Malanay

are your looking for something like this

在您寻找的东西像这样

#bs-example-navbar-collapse-1 > ul li a{
    border-top: 5px solid #E6E6E6;
}

#bs-example-navbar-collapse-1 > ul li a:hover{
    border-top: 5px solid black;
    background-color: #e6e6e6;
}

回答by tylerlindell

Adding a linear gradient would work

添加线性渐变会起作用

You can use this link to get a very thorough CSS to match what you are looking for.

您可以使用此链接获取非常详尽的 CSS 以匹配您正在寻找的内容。

Just make most of it light gray and the top like 5-10% darker gray.

只需将其大部分设为浅灰色，顶部设为深灰色 5-10%。

CSS gradient generator

CSS 渐变生成器