阴影未显示

Question

阴影未显示

56

我正在尝试在一个 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);
}

这是URL链接：http://rachelchaikof.com/awareness/

- user1869585

18

链接已损坏。您应该在问题中添加相关的HTML代码。 - The DIMM Reaper

2个回答

1

今天我遇到了另一种情况。尽管将位置相对于div设置为相对位置，但box-shadow仍未显示出来。显然，旁边没有内容具有box-shadow。添加内容后，box-shadow出现了。

- Pavithra Olety

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Herbert · Accepted Answer

你看不到阴影的原因是因为下一个div (#one) 直接位于它下方，阴影渲染在 #one 的下面。从#one中移除背景图像，阴影就会变得可见。

将以下内容添加到 #intro 的 CSS 中，使阴影可见：

position: relative;
z-index: 10;

如果你想让阴影在其他文本区域也能看到，你需要调整它们的z-index值，顶层元素(#intro)的值最高。

如果您希望其他文本区域也显示阴影，则需要调整它们的z-index值，其中顶层元素(#intro)具有最高的值。