带导航的双边框效果？

Question

我之前做过这个，但我不记得怎么做了。

我想要得到的图像：

到目前为止我所拥有的

在每个链接之间，有两个边界。是的，我知道如何制作效果，将两个边框放在一起。但问题是我做不到！

起初我尝试了Jefferey ways Technic。

nav ul li:before { border-left: 1px solid red;  content: ''; margin: 0 -30px; position: absolute; height: 20px;   }
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px;  }

除了导航左右两侧的边框突出外，它起作用了。我尝试:first-of-type和:last-of-type尝试删除最后的边框，但它们并没有消失。

然后，我尝试使用:first-of-type和:last-of-type来创建边框，但又一次。它不起作用。所以我真的不知道如何创造效果！我希望有一种方法可以用Jefferey Ways代码删除前端和后端边界，但我不能。有人可以帮忙吗？

这是导航的整个css。

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; }
nav ul {}
nav ul li { display: inline; padding: 32px; margin: 0 auto;  }
nav ul li:before { border-right: 1px solid red; }
nav ul li:odd { border-right: 1px solid white; }
nav ul li a { color: #626262; height: 20px;  }

Answer 1

#nav { 
    background: #282828 url(../images/nav-bg.png) repeat-x; 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -o-border-radius: 6px; 
    margin: 24px auto; 
    padding: 11px 29px; 
    width: 670px; }
#nav ul { list-style: none; padding: 0; margin: 0;}
#nav ul li { 
    display: inline; 
    padding: 32px; 
    margin: 0 auto; 
    border-left: 1px solid #LIGHTERCOLOR;
    border-right: 1px solid #DARKERCOLOR;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a { color: #626262; height: 20px;  }

但我建议您将分隔符剪切为图像，并将其作为

放在li上

background: transparent url(border-image.png) left center no-repeat;

并在li:first-child上

background: none;