合并框阴影

Question

我想创建一个带有无序列表的水平导航栏，并列出代表栏的元素的项目：

我为每个元素使用了25％的宽度，以便它们完全适合条形和盒子阴影以在每个列表项周围创建边框，因为如果我决定使用边框，则元素将不适合吧：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

我试过边界崩溃：崩溃但它并没有改变一件事。 我还想避免使用大纲，因为我想进一步设置这个菜单。

Answer 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; } ，边框不会影响您的宽度。

fiddle here

{{1}}

Answer 2

你最好的选择可能是Amr Noman的答案 但是，如果你真的想要修复阴影，可以使用相同的阴影（对于边框）设置条形图样式

并将左边的第二个.foo和以下样式设置为样式，以便它们填充内边框。

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

#bar {
  margin: auto;
  width: 50%;
  height: 30px;
  padding: 0;
  background: lightgrey;
  text-align: center;
  box-shadow: 0 0 0 1pt blue;
  
}
.foo {
  line-height: 30px;
  float: left;
  width: 25%;
  list-style: none;
}

.foo:nth-child(n+2) {
  box-shadow: -1pt 0 0 0  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>