CSS 影子没有出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13772427/
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
Shadow not showing up
提问by user1869585
I am trying to place shadows in one of the div and it's not showing up. Here is one div where I am trying to implement the shadow:
我试图在其中一个 div 中放置阴影，但它没有出现。这是我试图实现阴影的一个 div：
#intro {
padding: 0px;
margin: 0px auto;
width: 100%;
float:inherit;
overflow: hidden;
height: 800px;
position:inherit;
background-color: #00b3e1;;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
Here is the URL: http://rachelchaikof.com/awareness/
回答by Chris Herbert
The reason you can't see the shadow is because the next div (#one) is directly below it, and the shadow is rendering beneath #one. Remove the background image from #one and the shadow becomes visible.
看不到阴影的原因是下一个 div (#one) 就在它的正下方，而阴影正在 #one 下方渲染。从#one 中删除背景图像，阴影变得可见。
Add this to #intro's CSS to make the shadow visible:
将此添加到#intro 的 CSS 以使阴影可见：
position: relative;
z-index: 10;
If you want shadows visible on the other text areas, you'll need to adjust their z-index values as well, with the top element (#intro) having the highest value.
如果您希望阴影在其他文本区域可见，您还需要调整它们的 z-index 值，顶部元素 (#intro) 具有最高值。
回答by Pavithra Olety
Another scenario which I had today. Box-shadow was not showing up in spite of setting position relative to the div. Apparently there was no content next to this div which had box shadow.
我今天遇到的另一个场景。尽管设置了相对于 div 的位置，但 Box-shadow 并未出现。显然，此 div 旁边没有具有框阴影的内容。
Once the content was added, box-shadow showed up.
添加内容后，就会出现 box-shadow 。
