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

【问题标题】：border-radius renders edges from gradient-backgroundborder-radius 从渐变背景渲染边缘
【发布时间】：2016-02-25 19:32:09
【问题描述】：

我正在尝试使用 bootstrap 获取导航（带有 justify 的导航药丸），并且只希望第一项的左边缘和最后一项的右边缘的边界半径。（这完全没有问题）

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

在它起作用的最后一项上（悬停鼠标，你会看到）

引导层：http://www.bootply.com/MeZAUi07EK

有什么建议可以解决吗？

【问题讨论】：

我没有看到您在 Chrome 中描述的问题。您能否提供预期行为的模型以及实际行为的屏幕截图？
这里也一样，在 chrome 中，我根本看不到任何问题。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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

【讨论】：