css - border-radius 从渐变背景渲染边缘

Question

我正在尝试使用 bootstrap(带有 justify 的 nav-pills)获取导航，并且只需要第一项的左边缘和最后一项的右边缘的边界半径。 (这完全没有问题)

但是在第一项上，chrome(我还没有测试其他浏览器)从半径边缘的非事件/非悬停呈现渐变背景的颜色。

在它起作用的最后一个元素上(悬停鼠标，您会看到)

bootply:http://www.bootply.com/MeZAUi07EK

有什么解决办法吗？

Answer 1

试试这个 - 而不是 background-image 试试 background

CSS

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #f3f8fc 100%, #f3f8fc 100%) repeat scroll 0 0;
    border-color: #f3f8fc;
    color: #7ba4d0;
    text-shadow: none;
}

DEMO HERE