删除框阴影的右侧

Question

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

我正在尝试使用 box-shadow 遮蔽 div 的 3 个面.

原文由 Otis Wright 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为你有两个选择：

1. 将阴影的水平对齐设置为左侧（负值）。

 box-shadow: -30px 0px 10px 10px #888888;

虽然这样你不会在顶部和底部有相同的阴影大小。

1. 在一个div 中使用一个div 并对每个div 应用阴影。

 .div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

然后你必须调整你想要的尺寸。

在这里，有一个 jsfiddle：http: //jsfiddle.net/EwgKF/19/

原文由 Ivozor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新：

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

---

原答案：

如果您愿意使用只有 部分支持 的实验技术，您可以使用 clip path 属性。

这将为您提供我相信您想要的效果：顶部、左侧和底部边缘的正常框阴影和右侧边缘的干净截止。针对此问题的许多其他 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 的大小可以是灵活的。

原文由 Luke 发布，翻译遵循 CC BY-SA 4.0 许可协议