div 三侧的 CSS 框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8738768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS box-shadow on three sides of a div?
提问by user1117313
I want to have box-shadow on three sides of a div (except top side). How could I do that?
我想在 div 的三个侧面（顶面除外）上有框阴影。我怎么能那样做？
回答by Chris C
Here's a JS Fiddlefor you, it only uses one single div to work.
这是给你的JS Fiddle，它只使用一个 div 来工作。
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
您在底部、左下角和右下角设置阴影。使用柔和的阴影会有点棘手，但它是可行的。它只需要一些猜测来减少中间阴影的模糊半径，这样当它与侧阴影重叠时看起来无缝并且不会太暗。
回答by Maciej Krawczyk
If you are looking for something like Google material design shadows:
如果您正在寻找类似谷歌材料设计阴影的东西：
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
资料来源：https: //medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
回答by jenlampton
Here's an example of the negative Y value suggested by @Vigrond
这是@Vigrond 建议的负 Y 值的示例
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
回答by thdoan
If you have a solid background color, then you can accomplish this by using a combination of background-colorand z-index. The trick is to give the element with box-shadowand its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-indexso that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
如果你有一个坚实的背景颜色，那么你可以通过使用组合实现这一点background-color和z-index。诀窍是给元素box-shadow和它的前一个兄弟定位，然后给前一个兄弟一个背景颜色并将它设置为更高，z-index以便它堆叠在元素的顶部box-shadow，实际上覆盖了它的顶部阴影。
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
你可以在这里看到一个演示：http: //codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :beforeor :after: http://codepen.io/thdoan/pen/ojJEMj
如果没有直接的前一个兄弟姐妹可以使用，那么您还可以使用伪元素，例如:before或:after：http: //codepen.io/thdoan/pen/ojJEMj
回答by spikyjt
For translucent shadows with hard corners (i.e. no blur radius) I used this:
对于带有硬角（即没有模糊半径）的半透明阴影，我使用了这个：
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
这对左右部分使用阴影，并添加 :after 伪内容作为底部阴影。这避免了使阴影变暗或缺少角落的重叠。
However, this does require the background of the element to be solid.
但是，这确实需要元素的背景是纯色的。
回答by Nrc
I like @Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
我喜欢@Chris C 的回答，但我认为，我们不需要第一行代码。这是更短的，并给出了相同的效果：
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}<div id="note"></div>