影子没有出现

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);
}

Answer 1

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

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

position: relative;
z-index: 10;

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

Answer 2

我今天遇到的另一个场景。尽管设置了相对于 div 的位置，但 Box-shadow 并未显示。显然这个带有盒子阴影的 div 旁边没有任何内容。

添加内容后，就会出现盒子阴影。

Answer 3

对于任何可能遇到与我相同问题的人。

当输入为

:focus-visible

时，我想要一个盒子阴影。 我的输入位于

div

和

overflow: hidden

内。 这将隐藏您的

box-shadow

，具体取决于您的设置方式。