html - CSS圆角被a：hover背景忽略？（推特引导）

Question

我对 Twitter-Bootstrap 导航栏有点困惑，它是圆角。我已经为导航栏定义了圆角。当您将光标悬停在导航栏上时， a:hover 背景似乎忽略了角落。

以下是一些截图：

光滑的角落看起来不错。

这发生在 a:hover

如何在 CSS 中定义 a:hover 以不覆盖角落？我知道一种方法是使用图像文件，但目前此选项不适合。

---

编辑：

我已经设法使用@Radian 的代码使左侧 a:hover 弯曲，但是，右侧菜单 a:hover 效果完全搞砸了。

这段代码应该为第一个菜单链接添加圆角，它实际上做了什么，但有一些不需要的效果。

  .navbar .nav > li:first-child a {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

效果如下：

1）这看起来不错，就像我需要的那样。

2）但是，那是不行的。

JSFiddle： http: //jsfiddle.net/maku1337/GD23q和http://jsfiddle.net/maku1337/GD23q/embedded/result/以获得更清晰的视图。

Answer 1

我写的这段代码也许可以帮助你，这在现代浏览器中有效：

jsfiddle.net/C6zV8/

Answer 2

Posting the final solution for the problem which worked for me:

.navbar .nav > li:first-child a {
 border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;}