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

Question

我的内容被包裹在一个有内嵌框阴影的 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 的浏览器，请在叠加层上设置 display:none。或者，使用 :before 伪类仅在需要时添加覆盖。