我正在寻找的最终结果是这样的：
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 来获得所需的输出？
我试过了：
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');
}
要在滚动时保持相同的阴影效果，请将框阴影应用到wrapperdiv 然后应用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;
}
<a href="http://jsfiddle.net/YDYTd/3/">JS小提琴示例
还有另一种非常简单的方法可以实现类似的效果。您必须使用具有 boxshadow 的 div 来包装您的网站内容。此外，div 需要具有 100% 的宽度和高度，以及 position: absolute; 当你滚动页面时，这会给你一个很好的效果。
HTML
<div class="shadow">
<!-- ANY CONTENT GOES HERE -->
<div>
<h1>Content</h1>
</div>
<!-- ANY CONTENT GOES HERE -->
</div>
CSS
.shadow {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 400px #000000;
box-shadow: inset 0px 0px 400px #000000;
}
示例：http: //jsfiddle.net/2GRGF/1/
如果我理解正确，这就是您要寻找的：http: //jsfiddle.net/RGWrC/
这是代码：
html {
height: 100%;
}
body {
min-height: 100%;
box-shadow: inset 0 0 490px black;
background: url('whatever.jpg');
}
这会将背景扩展到页面的整个高度，但仍然确保最小值等于窗口的高度。我认为 CSS 是不言自明的。
我会将图像设置为页面背景，然后定义一个边距约为 100-200px 的容器（取决于您想要阴影的方式），并在该 div 上使用 box-shadow 填充此边距。您还可以将 div 设置为固定位置（我相信），以便它会随着页面滚动并保持相同的阴影效果
编辑：将图像设置为页面（html或body）背景将解决图像太小的问题，div创建您想要的阴影效果
你把阴影放在什么上面？你应该把嵌入阴影放在身体上，或者一个有 100% 大小的元素上。
链接中的图像重复了背景方块，然后是一个嵌入的阴影，可能在跨越整个屏幕的同一元素上
您是否将图像平铺设置为容器的背景，并将容器跨过屏幕？然后我认为你建议的css应该可以工作。也许试试小提琴...
整页阴影！
box-shadow: 0 0 0 100000px rgba(0,0,0,.2);