html - 删除框阴影的右侧

Question

我发现了很多与我所问的类似的帖子，并且已经为此努力了几个小时，最后决定我应该寻求一些外部建议:)。

我正在尝试使用 box-shadow 遮蔽 div 的 3 个面甚至应用这个。

Answer 1

更新:

clip-path 现在(2020 年)在所有主流浏览器中均受支持。

---

原答案:

如果您只愿意使用实验技术 partial support , 你可以使用 clip path property .

这将为您提供我相信您想要的效果:顶部、左侧和底部边缘的正常框阴影和右侧边缘的干净截止。针对此问题的许多其他 SO 解决方案会导致阴影在接近没有阴影的边缘时“消散”。

在您的情况下，您将使用 clip-path: inset(px px px px);其中像素值是从相关边缘计算的(见下文)。

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(-5px 0px -5px -5px);
}

这会将有问题的 div 剪辑在:

• 顶部边缘上方 5 像素(包括阴影)
• 距右边缘 0 像素(隐藏阴影)
• 底部边缘以下 5 像素(包括阴影)
• 左边缘外 5 像素(包括阴影)

请注意，像素值之间不需要逗号。

div的大小可以灵活调整。