Question

免责声明：我已经看到以下问题，他们的解决方案并不适用于我，即使他们的情况非常相似：

简单地说，我正在尝试将-moz-box-shadow 0 0 10px添加到.current_page_item类，该类应用于{{3}顶部标签导航中当前有效标签}}。该网站尚未包含实际的盒子阴影或任何这些更改，我在实际发布它们之前，现在只在firebug中使用这些修改。当然，这会导致阴影出现在所有方面，因此底边的阴影重叠到.content div中，该div存储博客的所有实际内容，即帖子。

根据我目前所看到的情况，似乎我应该设置某些内容的z-index，而不确定（我已尝试ul.menu ）更低的内容并且z-index div的.content更高，但这似乎没有效果。

我只是想知道这是否是正常行为，如果没有，是否有人可以帮助我摆脱这种情况。

谢谢，我真的很感激。

编辑：我之前在帖子中添加了box-shadow，但我指的是各自的具体指令，例如-moz-box-shadow。那不是我遇到的问题。

Answer 1

你需要在overflow:hidden上添加ul.menu作为honeybuzzer提及，但由于这也会切断顶部阴影，你应该向padding-top添加一些ul.menu以及..

Answer 2

<{1}}上的{p> overflow:hidden似乎摆脱了底层阴影。

Answer 3

clip-path现在（2020年）是一种出色的解决方案，如果您希望像这样“干净”地切除盒子阴影，则可以隐藏特定的盒子阴影边缘：

.shadow-element {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

只需将以下CSS应用于相关元素：

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

位置：

Apx设置顶部边缘的阴影可见性
Bpx对
Cpx底部
Dpx左

对于应隐藏阴影的任何边缘，输入0值；对应显示阴影的任何边缘，输入负值（与框阴影模糊半径-Xpx相同）。

此解决方案消除了对父元素应用样式的需求，从而提供了更大的灵活性。

隐藏框阴影的部分

3 个答案: