html - 如何创建覆盖整个页面的盒子阴影？

我要寻找的最终结果是这样的:

http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg

使用以下bkg标题生成的:

http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg

是否可以应用css3盒形阴影以获得所需的输出？

我试过了:

box-shadow: inset 0 0 490px black;

但这仅覆盖了屏幕的一小部分。

谢谢

最佳答案

确保将框阴影设置为100％的宽度和高度的任何元素。这意味着所有祖先还必须具有100％的高度和宽度。因此，如果要将其应用于body，html也必须具有这些属性。

CSS:

html, body {
    width:100%;
    height: 100%;
}

body {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
}

JS Fiddle Example

为了即使在滚动时也能保持相同的阴影效果，请将框阴影应用于wrapper div，然后再应用overflow:auto。

HTML:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS:

html, body, #wrapper {
    width:100%;
    height: 100%;
}

#wrapper {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
    overflow: auto;
}

JS Fiddle Example