Html 两侧边框底部1px过长CSS

我在做什么： 在按钮悬停时，我添加了5px的边框底部

JS小提琴：

问题：

#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}

#main-nav li a:nth-child(3) {
width: 225px;
}

#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}

#main-nav  a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}

问题是边框底部在左侧和右侧都延伸了1px太远

问题：

有人知道如何解决这个问题吗

相关代码：

#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}

#main-nav li a:nth-child(3) {
width: 225px;
}

#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}

#main-nav  a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}

---

可以通过从以下位置删除“左边框”和“右边框”样式来解决此问题：

更新的css：

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}

#main-nav li a:last-child {
width: 224px;
}

---

由于CSS边框在边缘“斜接”，您会注意到这种现象。为了解决这个问题，我创建了一些规则来突出显示悬停的

a

后面的

li

。这会产生一种效果，即在底部获得一个干净的边框。您也可以在元素之间保留这些白色分隔符

CSS

---

希望这能有所帮助。

还有一个巧妙的技巧，就是只使用方框阴影来应用冲突边界：

#main-nav  a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}

如果您只需替换当前的悬停选择器，则此选项有效

如果你想先试试，这里还有一把小提琴：

---

你能做一个JSFIDLE吗？CSS边框在边缘“斜接”，以一定角度聚集在一起。你现在看到的就是这样的结果。尝试左边界半径：1px和右边界半径：1px可能会有所帮助……是的，我也在考虑这个！干得好。