Html 如何删除边界半径后角上的白色像素

我创建了一个带有圆角的简单无序列表，当选择列表项时，我希望背景变成蓝色以显示活动状态。当我没有边界半径时，一切看起来都很棒

但是，当我使用4px的边界半径来圆角所有边，并选择底部圆角的最后一个列表项5时，蓝色活动状态现在在角上显示小的白色像素。我似乎不知道如何防止这种情况发生。谢谢你的帮助

HTML

JS

首先，为活动选项卡指定半径

.dash-stats-3 ul li a.active-tab {
    z-index:120;
    border-top: 1px solid #5b82a7;
    background: #4e81be; /* Old browsers */ 
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;  
}

确保它小于李的半径2px

并删除处于默认状态的a的半径。去掉这个

.left-dash div ul li:last-child a{
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px; 
}

留着这个

.left-dash div ul li:last-child{
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px; 
}

请查看：

---

问题是您给子元素的边界半径与父元素的边界半径相同。即使父元素没有边框，也会显示一些小像素，有边框的情况更糟。检查此项：

确定。我认为这简化了事情。过来看。我希望有帮助

---

我想你可能在一个div-box阴影上涂了点什么？你应该申请每个独立的li甚至链接。Parent div不知道border radius正在应用于它的一些子级，它应该适应它。您好，谢谢您的帮助。我认为不可能将框阴影应用于单个li或链接，这会使每个框都有自己的下拉阴影，而不是整个无序列表。我不明白为什么父div会导致问题，如果所有的边界半径都是相同的？这段代码很粗糙。我建议把它降低一个档次，把问题归结为简单的问题。我从来没有见过！以前在JSFIDLE中使用过的重要信息。这些选择器简直是疯了。我想你可能想得太多了。另外，你可能会注意到，有时候边界半径看起来很奇怪，比如，4px等等，平均屏幕无法平滑渲染，因为它太小了，像素太多了。在视网膜屏幕上检查它作为一个侧面测试。感谢您提供的解决方案，我看到您实现这一点的方法是将活动选项卡上的边界半径更改为2px，而不是4px。没有办法使边界半径始终保持一致吗？@trying_hal9000我更新了我的答案，检查示例，并从父级移除边界，仍然会显示一些像素，唯一的解决方法是有一个绝对子级，当父级有顶部时，它将完全覆盖父级：0；左：0；右：0；底部：0；需要tested@trying_hal9000如果你可以牺牲内部的，然后改为处理li，点击它，给它上色，把它的边框也涂成蓝色，我想你会避免这个问题。嗨，再次感谢你的帮助。我厌倦了只使用李的，问题仍然存在。我从来不知道父母和孩子的问题。我使用上面的方法进行了一次黑客攻击，javascript还将父div的边界半径更改为6px，这样活动选项卡的4px边界半径仍然小于父div。这似乎是可行的，但也似乎是更多的jscode@trying_hal9000很好的技巧，不用担心使用JS，我知道用纯css做事情更好，但是JS无处不在，使用它并不丢脸。父和子边界半径的问题甚至不能用绝对子级解决。我测试了它，当然，如果大小很小，它不会被注意到，因为额外的像素只有2个像素，我认为这是渲染问题，可能在浏览器和其他浏览器之间有所不同；在那里。。。在a上，我开始怀疑我是否理解这个问题。谢谢你的帮助，但这个解决方案并不能真正解决我的问题，如果我能够进行整个重新设计，我想我可以使用这个解决方案。仅供参考，因为你很关心这个问题！这一点很重要，因为我将项目中的代码复制并粘贴到JSFIDLE中。

.dash-stats-3 ul li a.active-tab {
    z-index:120;
    border-top: 1px solid #5b82a7;
    background: #4e81be; /* Old browsers */ 
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;  
}

.left-dash div ul li:last-child a{
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px; 
}

.left-dash div ul li:last-child{
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px; 
}

<ul class="test-list">
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
    <li><a href="?">Item thing</a></li>
</ul>

/* border box - google it. it rules*/ 
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

.test-list {
    float: left;
    overflow: hidden;
    list-style: none;

    /* just to show the properly containing ul */  
    margin: 2em;
    background-color: rgba(0,0,0,.05);
    padding: 1em;
}

.test-list li {

}

.test-list a {
    display: block;
    float: left;
    clear: left;
    background-color: #f06;
    padding: 1em 2em;
    min-width: 12em;

    color: white;
    text-decoration: none;
    border: 3px solid rgba(0,0,0,1);
    border-bottom: 0;
}

.test-list a:hover {
    background-color: lightblue;
    color: black;
}

.test-list li:first-of-type a {
    -webkit-border-radius:.4em .4em 0 0;
    border-radius: .4em .4em 0 0;
}

.test-list li:last-of-type a {
    -webkit-border-radius: 0 0 .4em .4em;
    border-radius: 0 0 .4em .4em;
    border-bottom: 3px solid black;
}