html - css 合并框阴影

Question

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

我为每个元素使用了 25% 的宽度，这样它们就可以完全适合条形，并使用框阴影在每个列表项周围创建一个边框，因为如果我决定使用边框，元素将无法容纳在里面酒吧:

#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;
}

<ul id="bar">
  <li class="foo">Foo 1</li>
  <li class="foo">Foo 2</li>
  <li class="foo">Foo 3</li>
  <li class="foo">Foo 4</li>
</ul>

但是，因为每个元素之间有两个阴影，所以它们之间的阴影厚度是原来的两倍。

有没有办法以某种方式合并这些阴影？

我试过 border-collapse: collapse 但它没有改变任何事情。我还想避免使用大纲，因为我想进一步设计此菜单的样式。

Answer 1

这个怎么样？ 只需使用 box-sizing: border-box; 边框就不会影响宽度。

fiddle here

* {
  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;
}