Html css合并框阴影

我想制作一个水平导航栏，其中包含无序列表和表示该栏元素的列表项：

我为每个元素使用了25%的宽度，以便它们正好适合于条形图，并使用方框阴影在每个列表项周围创建边框，因为如果我决定使用边框，则元素将不适合于条形图：

#条{
保证金：自动；
宽度：50%；
高度：30px；
填充：0；
背景：浅灰色；
文本对齐：居中；
}
傅先生{
线高：30px；
浮动：左；
宽度：25%；
列表样式：无；
盒影：0.1pt黑色；
}

foo 1
foo 2
foo 3
foo 4

这个怎么样？ 只需使用

框大小：边框框和边框不会影响您的宽度


您最好的选择可能是来自Amr Noman的答案
但是，如果您真的想修复阴影，您可以使用您正在使用的阴影（用于边框）来设置该条的样式

并将第二个.foo和下面的样式设置在左侧，以便填充内部边界

我已将外部边框设置为蓝色，因此很容易看到什么是什么


#条{
保证金：自动；
宽度：50%；
高度：30px；
填充：0；
背景：浅灰色；
文本对齐：居中；
盒影：0 1pt蓝色；
}
傅先生{
线高：30px；
浮动：左；
宽度：25%；
列表样式：无；
}
.foo:n个孩子（n+2）{
盒影：-1pt 0黑色；
}

foo 1
foo 2
foo 3
foo 4
如果您只需要针对现代浏览器，您可以查看
calc（）
。这将允许您为边框将每个项目的宽度设置为
25%-1pt
。然后你可以使用负边距来折叠内边框。但是这个解决方案没有使用
框阴影，是吗？他没有说它必须是
框阴影，他说“如果我决定使用边框，元素将无法放入条内”。所以我给了他一种不用他提到的问题就可以使用边界的方法。是的，在比较了问题和你的答案之后，我很清楚。您提出的解决方案更优雅、更具语义，因为提问者的意思是“带边框的元素”，而不是“带阴影的元素”+1.
* {
  box-sizing: border-box;
}

#bar
{
  margin: auto;
  width: 50%;
  height: 30px;
  padding: 0;
  background: lightgrey;
  text-align: center;
}

.foo
{
  line-height: 30px;
  float: left;
  width: 25%;
  list-style: none;
  /* box-shadow: 0 0 0 1pt black; */
  border-top: 1px black solid;
  border-left:1px black solid;
  border-bottom: 1px black solid;
}

.foo:last-child {
  border-right: 1px black solid;
}