移除框阴影的右侧

Question

我找到了许多类似于我要求的帖子,并且已经在这里工作了几个小时,最后决定我应该寻求一些外部建议:).

我试图使用盒子阴影遮住div的3个边我希望右边没有阴影但是无法弄明白有很多关于如何取消阴影顶部的帖子但是经过无数次的努力我甚至无法应用这个.

Answer 1

如果您愿意仅使用部分支持的实验技术,则可以使用该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:

请注意,像素值之间不需要逗号.

div的大小可以灵活.

我要强调的是，恕我直言，这是最好的方法。现在（2019 年）除了 Edge/IE 之外，所有主要浏览器都支持“clip-path”，但现在当基于 Chromium 的 Edge 推出时，我认为这不再是一个问题。 (2认同)
不过，最好还是使用“-webkit”前缀，一些现代浏览器仍然依赖它，因为到 2023 年，它的支持率接近 +5%，这使得 Clip-path 的支持率达到 95%——可以安全使用。 (2认同)

Answer 2

我想你有两个选择:

1)将阴影的水平对齐方式设置为左侧(负值).

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

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

2)在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/