仅在 3 个 div 的特定边界上的 Box-Shadow

Question

我已经为 CSS 苦苦挣扎了几个小时。

我正在尝试在我网站的一个元素上添加一个 box-shadow，该元素由 3 个 div 组成：#top #content 和 #bot.

这是一张图片，可以帮助您直观地了解我所处理的内容：

box-shadow 在 div #content 的左右两侧是比较容易的部分，但我真的很难找到顶部和底部。我做不出任何看起来很干净的东西。

这是我的代码：

body {
  margin-top: 30px;
}
div#content {
  padding: 20px 30px 20px 30px;
  color: #515348;
  font-size: 76%;
  line-height: 1.6em;
  height: 100px;
  background: #FFF;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#top {
  background: #FFF;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  border-radius: 8px 8px 0px 0px;
  behavior: url(/PIE.htc);
  border-top: 1px solid grey;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  box-shadow: 0 9px 0px 0px white, -8px 0 14px -4px rgba(33, 33, 33, 0.5), 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#bot {
  background: #FFF;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 0px 0px 8px 8px;
  -moz-border-radius: 0px 0px 8px 8px;
  border-radius: 0px 0px 8px 8px;
  behavior: url(/PIE.htc);
  border-bottom: 1px solid grey;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  box-shadow: 8px 4px 14px 4px rgba(33, 33, 33, 0.5), 0 9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}

<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>

有没有想过把这个东西做一点"cleaner"？

快速编辑：机器人部分的 box-shadow 实际上在我的屏幕上看起来并不糟糕，我发现了一些更好的设置，但后来我丢失了尝试不同的配置。

Answer 1

用三个而不是一个 div 有什么意义？

box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 300px;
height: 120px;
background: #FFF;
border: 1px solid grey:
}

然后根据需要在选择器上应用框阴影

Answer 2

形状周围的阴影：

问题中提供的图像（与代码片段一起看到时）有点令人困惑，您是否只在侧面（或）寻找整个形状的阴影。

如果您希望为整个形状添加阴影，那么一种选择是向容器元素添加一个伪元素，使其等于容器的高度 + 顶部 + 底部元素。这个伪元素也应该被赋予 border-radius 并以相同的编号定位在容器上方。像素作为顶部元素的高度（倒置）。将所需的 box-shadow 添加到此伪元素将产生预期的输出。

body {
  margin-top: 30px;
}
div#content {
  position: relative;
  height: 100px;
  width: 240px;
  padding: 20px 30px 20px 30px;
  margin-right: auto;
  margin-left: auto;
  color: #515348;
  font-size: 76%;
  line-height: 1.6em;
  background: #FFF;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
div#content:before {
  position: absolute;
  content: '';
  left: 0px;
  top: -10px;  /* positioning above makes shadow extend above */
  height: calc(100% + 20px);  /* to offset for top and bottom */
  width: 100%;
  border-radius: 8px;
  z-index: -1;  /* to send the elements and their shadow behind  */
  box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 6px 6px 0px rgba(33, 33, 33, 0.25), 0px -6px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
  position: relative;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  background: #0F0;
  border-radius: 8px 8px 0px 0px;
  border: 1px solid grey;
  border-width: 1px 1px 0px 1px;
}
#bot {
  position: relative;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  background: #00F;
  border-radius: 0px 0px 8px 8px;
  border: 1px solid grey;
  border-width: 0px 1px 1px 1px;
}

<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>

形状周围有阴影，但向顶部和底部逐渐变暗：

在这种方法中，阴影应用于整个形状，但逐渐向顶部和底部淡化。这些是基于描述、相关图像和摘要的所有可能变体。你可以选择最适合你的。

body {
  margin-top: 30px;
}
div#content {
  position: relative;
  height: 100px;
  width: 240px;
  padding: 20px 30px 20px 30px;
  margin-right: auto;
  margin-left: auto;
  color: #515348;
  font-size: 76%;
  line-height: 1.6em;
  background: #FFF;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
div#content:before {
  position: absolute;
  content: '';
  left: 0px;
  top: -8px;  /* positioning above makes shadow extend above */
  height: calc(100% + 16px);  /* to offset for top and bottom */
  width: 100%;
  border-radius: 8px;
  z-index: -1;  /* to send the elements and their shadow behind  */
  box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
  position: relative;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  background: #0F0;
  border-radius: 8px 8px 0px 0px;
  border: 1px solid grey;
  border-width: 1px 1px 0px 1px;
}
#bot {
  position: relative;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  background: #00F;
  border-radius: 0px 0px 8px 8px;
  border: 1px solid grey;
  border-width: 0px 1px 1px 1px;
}

<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>

只有侧面有阴影：

仔细查看问题中提供的原始图像，我可以看到的一件事是您实际上不需要 box-shadow 在顶部和底部元素上。你只需要容器上的阴影在它的上方和下方延伸一点。这可以通过仅使用容器元素以一种非常 hacky 的方式实现，但这太复杂和丑陋了。

因此，另一种选择是向容器元素添加一个伪元素并将其定位在容器上方一点点。一旦将box-shadow添加到这个伪元素中，就会达到预期的外观。

注意：在下面的代码片段中，我添加了红色阴影并且 为顶部和底部着色 div 只是为了说明阴影如何延伸到 #content 上方和下方。我还删除了不再需要的额外属性并缩短了一些其他属性。

我还强烈建议将三个 div 合并为一个，因为这会使整个事情变得更加简单。

body {
  margin-top: 30px;
}
div#content {
  position: relative;
  height: 100px;
  width: 240px;
  padding: 20px 30px 20px 30px;
  margin-right: auto;
  margin-left: auto;
  color: #515348;
  font-size: 76%;
  line-height: 1.6em;
  background: #FFF;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
div#content:before {
  position: absolute;
  content: '';
  left: -1px;
  top: -7px;  /* positioning above makes shadow extend above */
  height: calc(100% + 14px);  /* to cover top and bottom */
  width: 100%;
  z-index: -1;  /* to send the elements and their shadow behind  */
  box-shadow: 6px 0px 12px -6px rgba(255, 0, 0, 0.75), -6px 0px 12px -6px rgba(255, 0, 0, 0.75);
}
#top {
  position: relative;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  background: #0F0;
  border-radius: 8px 8px 0px 0px;
  border: 1px solid grey;
  border-width: 1px 1px 0px 1px;
}
#bot {
  position: relative;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  background: #00F;
  border-radius: 0px 0px 8px 8px;
  border: 1px solid grey;
  border-width: 0px 1px 1px 1px;
}

<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>

仅在 3 个 div 的特定边界上的 Box-Shadow

Box-Shadow on only specific borders of 3 divs

css

box-shadow