shadow - 影子没有出现

Question

我试图在其中一个 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);
}

这是网址：http ://rachelchaikof.com/awareness/

Answer 1

看不到阴影的原因是下一个 div (#one) 就在它的正下方，而阴影在 #one 下方呈现。从#one 中删除背景图像，阴影变得可见。

将此添加到#intro 的 CSS 以使阴影可见：

position: relative;
z-index: 10;

如果您希望阴影在其他文本区域上可见，您还需要调整它们的 z-index 值，顶部元素 (#intro) 具有最高值。

Answer 2

我今天遇到的另一种情况。尽管设置了相对于 div 的位置，但盒子阴影没有出现。显然，这个 div 旁边没有包含框阴影的内容。

一旦添加了内容，box-shadow 就会出现。