html - 我的导航栏末端有两种颜色的边框？

Question

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

知道我能不能做到这一点？

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

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

score 1 · Accepted Answer

一个简单的解决方案是将额外的边框应用于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-leftborder-right

score 0 · Accepted Answer

那是你想要发生的事情吗？我认为你会双重概述最后一个孩子。

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

score 0 · Accepted Answer

0

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

于 2012-12-28T23:22:54.570 回答

3 回答 3