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

Question

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

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

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

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

有没有人创造过这样的效果？如果是这样，请详细说明这个问题！感谢。

Answer 1

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

<强> 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

Answer 2

添加线性渐变可以正常工作

您可以使用此链接获取非常全面的CSS以匹配您要查找的内容。

只需将其中的大部分变为浅灰色，顶部就像5-10％的深灰色。

CSS gradient generator

Answer 3

您正在寻找类似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;
}