TL; DR：

Question

background: url("images/main_bg.png") repeat;

是style.css中的标题/横幅背景图片，但不确定如何在其周围获得阴影......

我试过

body {
    font-family: Arial,Helvetica,sans-serif;    
    font-size: 13px;
    color: #333333;
    background: url("images/main_bg.png") repeat;
    box-shadow: 0 0 5px 2px #282a2d;
    line-height: 1.4;
}

但这没有成功......

Answer 1

TL; DR：

如果您对 ~~WebKit~~ Chrome仅支持感到满意，请使用CSS Filters。

如果您对polyfilled CSS Canvas上下文和Canvas，you can support Mozilla and WebKit browsers感到满意，Chrome将不会模糊它的阴影。

如果您可以在SVG中重新创建图像，并且您的目标浏览器确实支持它，那么它也是viable option。 ^{实际上，这似乎是您可以获得SVG背景的最佳选择。大多数主流浏览器显示相同的结果，但Safari似乎会删除过滤器。}

您可以在下面阅读有关选项如何发展的过程。

原始答案：

我怀疑你期待的是可能的。

首先，body占据了100％的高度和100％的页面宽度，＆＃34;外部＆＃34;它的阴影将永远隐藏。

如果按如下方式设置属性：

box-shadow: inset 0 0 5px 2px #282a2d; /* mark the inset */

但是，你应该看到阴影，我怀疑你的追求是什么。

您可以通过将图片包装在一个新元素中来克服这个问题，该元素是body的孩子，并且小于body尺寸的100％。

此外，您可能会使body的维度小于100％，但我不鼓励这样做 - 在某些浏览器中可能会中断等等。

我的第二个猜测，源于您使用png，因此，透明图像，是您希望shadow围绕它填充像素边缘的图像，保持透明不变。虽然这听起来很酷，但这不是CSS的作用。

该属性名为box-shadow而不仅仅是shadow，因此它已经声明它无法实现。

我不知道这是否可行，但您可以尝试使用SVG及其过滤器来执行此操作。我不是SVG的专家 - 无法立即提供示例（不过会查看）。

另一种可能性是使用canvas as background作为元素，并以编程方式应用阴影（迭代像素并添加额外的像素）。

更新：我们不知道Canvas足够聪明，可以通过透明图像进行阴影处理，不需要编程部分。

请记住，浏览器肯定会支持最后两个变体。

更新

CSS过滤器：

好的，还有一种可能性 - CSS过滤器，但在编写时，它们仅受WebKit支持。 ~~确实不确定它们是否适用于所有WebKit浏览器（Safari，Opera，Chrome），但它们适用于Chrome。~~

使用最新的Safari for Windows，Opera和Chrome进行检查，证明该属性仅适用于Chrome。

有一个＆＃34;但是＆＃34;，它是not supported on body either (jsfiddle.net)，我认为所有很酷的东西都让body落后了。

如果是child node, it works (jsfiddle.net)！

P.S。最终，我们可能会在每个浏览器中看到CSS过滤器。这使得这是此类功能的最佳选择。

画布：

更新

我用帆布做了一些实验。一般来说，它取得了成功，甚至适用于body：http://jsfiddle.net/psycketom/3VBMJ/4/。

尽管如此，我无法设法使shadowBlur财产有效。可能它不适用于CSS Canvas Context。

并且，Firefox本身并不支持cssCanvasContext，所以 ~~-moz-background~~ （它实际上是-moz-element，但由于没有cssCanvasContext，{ {3}}）属性被忽略。我认为可以使用it still fails进行攻击。

更新2：

shadowBlur属性适用于Safari，不适用于Chrome。

更新3：

off-screen canvas我在离屏画布上进行了测试，但无法将它们整合在一起。我现在给它的时间多了一点。

更新4：

离屏画布在Firefox中运行 - http://jsfiddle.net/psycketom/3VBMJ/6/，但是，在Webkit中不起作用。
但是，动态生成的画布也会执行http://jsfiddle.net/psycketom/3VBMJ/12/。

更新5（值得检查）：

我做了it has to be appended, and hidden afterwards，现在，在Webkit和Mozilla浏览器中都支持Canvas背景。

更新6：

我做了一个快速的兼容性测试 - Chrome（27.0.1453.116 m）正常工作，Firefox（22.0）正常工作，Safari（适用于Windows，5.1.7 7534.57.2）正常工作。

至于... IE（10.0.9200.16618）不起作用，Opera（12.14 1738）无法正常工作。

SVG：

首先，SVG要求您在向量中创建图像。

更新

哦，男孩，哦，男孩...... SVG ...... dirty polyfill。这不是一个真正的背景图片，它只是SVG内部的HTML，并且它的容器元素已应用pointer-events: none，以禁用任何鼠标输入。

适用于Firefox和Chrome，以及其他可能，因为它依赖于比CSS3 / HTML5更受支持的SVG。但请记住，SVG的某些部分不受支持，过滤器可能是其中之一。

更新2：

通过将我们拥有的内联html之前的内容倾注到它自己的文件中，我们可以使用http://jsfiddle.net/psycketom/3VBMJ/18/。检查Chrome和Fox - 两者兼容。

更新3：

我做了一个快速的兼容性测试 - Chrome（27.0.1453.116米）正常工作，Firefox（22.0）正常工作，IE（10.0.9200.16618）正常工作，Opera（12.14 1738）正常工作。

至于Safari（适用于Windows，5.1.7 7534.57.2） - 它可以工作，但根本不显示阴影。

这就是我对子元素的意思：

SVG as background-image

其他信息：

http://jsfiddle.net/psycketom/3VBMJ/21/似乎一般支持Chrome中的shadowBlur（红色框），但它不支持PNG（笑脸）。

我很困惑，现在，是因为最近切换到Blink还是从未在Chrome中支持过它？

Answer 2

第一个值是水平偏移，第二个值是垂直偏移。第三个描述了模糊半径，最后描述了扩散半径。

但如果您只定义模糊和传播，那么它可以工作。

你使用什么浏览器？

你试过吗

-moz-box-shadow:    0px 0px 5px 2px #282a2d;
-webkit-box-shadow: 0px 0px 5px 2px #282a2d;

Answer 3

首先，您无法在<body>标记
要在您的网页中设置阴影，您需要使用<div class="x">your data</div>或<table><tr><td class="x">your data</td></tr></table>
现在使用class x来赋予阴影
现在<div>您的代码就像

.X {

webkit-box-shadow：0px 0px 10px 7px＃606060;

moz-box-shadow：0px 0px 10px 7px＃606060;

box-shadow：0px 0px 10px 7px＃606060;

}

现在<table>您的代码就像

td.x {

webkit-box-shadow：0px 0px 10px 7px＃606060;

moz-box-shadow：0px 0px 10px 7px＃606060;

box-shadow：0px 0px 10px 7px＃606060;

}

如何在背景图像周围创建阴影

3 个答案:

TL; DR：

原始答案：

更新

CSS过滤器：

画布：

更新

更新2：

更新3：

更新4：

更新5（值得检查）：

更新6：

SVG：

更新

更新2：

更新3：

这就是我对子元素的意思：

其他信息：