代码之家 › 专栏 › 技术社区 › Jorge Israel Peña

隐藏长方体阴影的部分

css3 css

5

Jorge Israel Peña · 技术社区 · 15 年前

免责声明:我已经看到以下问题,它们的解决方案不适用于我,即使它们是非常相似的情况:

-moz-box-shadow 属于 0 0 10px .current_page_item 类,该类应用于位于 my website . 该网站还没有包括实际的框阴影或任何这些变化,我只是在firebug中玩了这些修改,现在才真正发布它们。自然地,这会导致阴影出现在所有边上,因此底边的阴影会重叠到背景中 .content div,它存储博客的所有实际内容,即帖子。

根据我到目前为止看到的情况,似乎我应该设定 z-index 有些事,不确定是什么( ul.menu )低一点,高一点 z指数 div到更高的值,但这似乎没有效果。

我只是想知道这是否是正常的行为,如果不是,是否有人能帮我解决这个问题。

谢谢,我真的很感激。

编辑 :我把 box-shadow 在前面的帖子中,我指的是各自的具体指令,例如 . 这不是我遇到的问题。

2 回复 | 直到 7 年前

1

5

Gabriele Petrioli 15 年前

overflow:hidden 上 ul.menu padding-top 菜单

2

1

honeybuzzer 15 年前

overflow:hidden 在…上 ul.menu 似乎摆脱了底部阴影。

3

0

Luke 4 年前

clip-path

.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 左边

Xpx )到应显示阴影的任何边。

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