Question

我的内容被包含在一个div中，该div有一个插入框阴影，试图让内容隐藏在页面中。我遇到的问题是，任何足够接近边缘以与阴影重叠的内容项都会隐藏阴影，而不是将阴影覆盖在它们之上。 http://jsfiddle.net/wheresrhys/Y8tXW/

除了在每个元素上定义阴影之外，还有其他方法可以达到预期的效果吗？

Answer 1

您可以使用以下内容：http://jsfiddle.net/Y8tXW/5/

那就是添加一个带有样式的内框：

.overlay{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
    pointer-events: none; /* Makes sure the inner contents can still have mouse interaction*/
}

假设您希望阴影覆盖其他元素。对于太旧的浏览器，无法在叠加层上支持box-shadow set display:none。或者，使用:before伪类仅在需要时添加叠加层。

Answer 2

我建议使用CSS3边框图像，而不是使用一些空元素来执行此操作（这会阻止与边缘处的任何元素进行交互）。如果我没有弄错的话，边框将被绘制在内容的顶部（至少部分地），而不会干扰交互性。

Answer 3

您可以简单地在.shadow div中添加填充，以便内部的内容不会覆盖阴影效果，而不是添加位置：绝对并禁用div内的内容并将阴影效果覆盖在内容上。 / p>

查看http://jsfiddle.net/Y8tXW/12/

使用CSS3 Box-shadow实现凹陷容器效果

3 个答案: