ul中最后一个孩子的边框是灰色的（尽管我将边框颜色指定为#FFF）而不是白色，为什么？

Question

这是一个页面的topmenu，我为每个li元素设置了一个左边框，而对于ul的最后一个孩子，我也添加了一个右边框。但由于某种原因，最后一个孩子的右边界看起来是灰色而不是白色，我似乎无法弄清楚为什么......提前谢谢。

.menu li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;     
    background-color:#D64708;
    display:inline-block;
    border-left: 1px outset #fff;
    width:20%;
    float:left;
}
.menu li:last-child{
    border-right: 1px outset #fff;
}

标题+ CSS的完整代码：https://jsfiddle.net/xaxdjyy1/

（我不知道任何javascript）

编辑：错误的jsfiddle链接。

Answer 1

您的边框样式为outset。为了达到这样的效果，开始边框的阴影不同。

如果您想要纯白色边框，请使用solid代替outset。

Answer 2

这不是颜色，而是让它看起来那样的开始阴影。这将为您提供坚实的白色边框。

.menu li:last-child{
    border-right: 1px solid #fff;
}