html - ul 中最后一个 child 的边框是灰色的(尽管我将边框颜色指定为#FFF)而不是白色，为什么？

Question

这是一个页面的顶部菜单，我为每个 li 元素放置了一个左边框，对于 ul 的最后一个子元素，我也添加了一个右边框。但出于某种原因，最后一个 child 的右边框显示为灰色而不是白色，我似乎无法弄清楚为什么......提前致谢。

.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。