html - 如何模仿谷歌的粗红色下划线文本装饰

Question

我正在尝试使用 this code 模拟上面红色文本装饰(“Web”下方)的外观.

又来了

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li class="active"><a href="#">Active</a></li>  

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

CSS:

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff; 
  text-decoration: underline 3px;
  border-bottom:4px solid #ebebeb
}

我的粗细我觉得是最合适的，颜色也是，但是，当你看的时候，你会发现那个白色边框和导航栏之间有一个非常小的间隙，而且边框太长了，所以我想知道

1. 如何消除该间隙，导致边框与白色背景“融合”。
2. 减少我的边框长度，这似乎与它后面突出显示的框的宽度相对应。

有什么建议吗？谢谢。

Answer 1

Here's一种假设您不介意使用 box-shadow 属性的方法。

应用设置的高度使列表项与导航栏相匹配。

.navbar-inverse .navbar-nav > li { height: 52px; background: #080808; }

然后向 anchor 添加一个没有模糊和负扩展的框阴影。

.navbar-inverse .navbar-nav > .active > a {
    -webkit-box-shadow: 0px 14px 0px -10px #dbdbdb;
    -moz-box-shadow:    0px 14px 0px -10px #dbdbdb;
    box-shadow:         0px 14px 0px -10px #dbdbdb;
}

关于您的其他问题，我过去注意到您所指的“差距”似乎因浏览器而异。我能够消除它的唯一方法是负边距，但也许其他人有更好的解决方案。