导航栏末端有两个彩色边框？

Question

http://jsfiddle.net/R5G56/

我正在尝试创建一个带有边框和轮廓的插入效果的导航栏，我希望第一个和最后一个导航项在其外部也具有相同的插入边框。我可以使用第一个导航项获得效果，因为轮廓与边框颜色相同，但是当轮廓应用于最后一个导航项时，它看起来很荒谬，因为它也会改变它周围的一切。

我是否能做到这一点？

这是第一个和最后一个项目的CSS，其余的CSS可以在jsfiddle中找到：

.navigation li:first-child a {
    outline:1px solid #000;
}
.navigation li:last-child a {
    outline:1px solid #383838;
}

Answer 1

一个简单的解决方案是将额外边框应用于li标记而不是a标记。所以新的CSS将如下所示。实例：http://jsfiddle.net/R5G56/6/

.navigation li:first-child{
    border-left:1px solid #000;
}
.navigation li:last-child {
    border-right:1px solid #383838;
}

a代码已从选择器中移除，而outline已被border-left和border-right切换为<{1}}。

Answer 2

http://jsfiddle.net/R5G56/5/

你看起来想要发生什么？我想你是最后一个孩子的双重概述了 除此以外。

.navigation li:last-child a {
    border-right:1px solid #383838;
}

Answer 3

你能用盒子阴影来欺骗边框吗？您可以在一个语句中分配多个