css合并框阴影答案

【问题标题】：css merge box shadowscss合并框阴影
【发布时间】：2016-01-16 19:03:16
【问题描述】：

我想制作一个带有无序列表和表示栏元素的列表项的水平导航栏：

我为每个元素使用了 25% 的宽度，以便它们完全适合 bar 和 box-shadow 以在每个列表项周围创建边框，因为如果我决定使用边框，元素将不适合里面酒吧：

#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，但并没有改变任何事情。我还想避免使用大纲，因为我想进一步设置此菜单的样式。

【问题讨论】：

如果您只需要针对现代浏览器，您可以查看calc()。这将允许您将每个项目的宽度设置为25% - 1pt 作为边框。然后你可以使用负边距来折叠内边框。

标签： html css

【解决方案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;
}

【讨论】：

但是这个解决方案不使用box-shadow，是吗？
他没有说它必须是box-shadow，他说“如果我决定使用边框，元素将不适合栏内”。所以我给了他一种使用边框的方法，而不会出现他提到的问题。
是的，在更仔细地比较了问题和您的答案之后，我很清楚。您提出的解决方案更加优雅和语义，因为提问者表示“带边框的元素”，而不是“带阴影的元素”。 +1！

【解决方案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>

【讨论】：