Box-Shadow仅限3个div的特定边框

时间：2015-10-18 17:13:27

标签： css css3 box-shadow

我已经花了几个小时才能使用我的CSS。

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

这是一张图片，可以帮助您想象我处理的内容： enter image description here

box-shadow左侧和右侧的#content是一个简单的部分，但我真的在顶部和底部挣扎。我不能做任何看起来很干净的东西。

这是我的代码：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
＆＃13;
＆＃13;
＆＃13;

任何想法让这件事情变得更清洁＆＃34; ？

快速编辑：机器人部分上的box-shadow实际上并没有在我的屏幕上看到 坏，我找到了一些更好的设置，我通过尝试不同的配置而丢失了

2 个答案:

答案 0 :(得分：3)

阴影周围形状：

有问题的图像（当与片段一起看时）对于您是否仅在整个形状的整体形状的侧面（或）上寻找阴影有点令人困惑。

如果要在整个形状上添加阴影，则可以选择将一个伪元素添加到容器元素中，使其等于容器的高度+顶部+底部元素。这个伪元素也应该被赋予border-radius并且位于容器上方的相同的no。像素作为顶部元素的高度（反转）。将所需的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。你只需要容器上的阴影，它在它上面和下面延伸一点。这可以通过单独使用容器元素以一种非常黑客的方式实现，但这太复杂和丑陋了。

因此，替代选项是将一个伪元素添加到容器元素并将其放置在容器上方一点点。将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>

答案 1 :(得分：0)

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

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

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

相关问题
最新问题