8 
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;
}

但这并没有成功...

4

3 回答 3

24

TL;博士：

如果您对仅支持WebKit Chrome感到满意，请使用CSS 过滤器。

如果您对填充的 CSS Canvas Context 和 Canvas 感到满意，您可以支持 Mozilla 和 WebKit 浏览器，不过，Chrome 不会因为它的影子而模糊。

如果您可以在 SVG 中重新创建图像，并且您的目标浏览器确实支持它，那么这也是一个可行的选择。实际上，如果您可以在 SVG 中获取背景，这似乎是最佳选择。大多数主要浏览器显示相同的结果，但 Safari 似乎放弃了过滤器。

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

原答案：

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

首先，body占据页面 100% 的高度和 100% 的宽度，它的“外部”阴影将永远隐藏。

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

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

您应该看到阴影，但是，我怀疑那是您所寻求的。

您可以通过将图像包装在一个新元素中来解决这个问题，该元素是 的子元素，body并且小于 100%body的尺寸。

此外，您可以使body' 的尺寸小于 100%，但我不鼓励这样做 - 它可能会在某些浏览器等中中断。

我的第二个猜测是，您使用的是png透明图像，因此您希望shadow图像周围的图像填充像素边缘，而保持透明不变。虽然这听起来像是一个很酷的想法，但这不是 CSS 所做的。

该属性不仅被调用，因此它已经声明它是不可能的box-shadow。shadow

我不知道这是否可能，但你可以尝试使用SVG它的过滤器来这样做。我不是 SVG 方面的专家 - 无法立即提供示例（不过会调查）。

另一种可能性是canvas用作元素的背景，并以编程方式应用阴影（遍历像素并添加额外的像素）。

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

请记住，最后 2 个变体肯定会受到浏览器的不良支持。

更新：

CSS 过滤器：

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

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

有一个“但是”，body 也不支持它（jsfiddle.net），我认为所有很酷的东西都被抛在了body后面。

如果是子节点，它可以工作（jsfiddle.net）！

PS 最终，我们可能会看到每个浏览器都实现了 CSS 过滤器。这使其成为此类功能的最佳选择。

帆布：

更新：

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

但是，我无法使shadowBlur财产正常工作。可能它不适用于 CSS Canvas 上下文。

并且，Firefox 本身不支持 cssCanvasContext，因此-moz-background（实际上是-moz-element，但由于没有 cssCanvasContext，它仍然失败）属性被忽略。我认为这可能会被屏幕外的 canvas破解。

更新 2：

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

更新 3：

http://jsfiddle.net/psyketom/3VBMJ/6/我用离屏画布做了一个测试，但不能一起破解。我现在给它更多的时间。

更新 4：

屏幕外画布在 Firefox 中确实有效 - http://jsfiddle.net/psyketom/3VBMJ/12/，但在 Webkit 中无效。
动态生成的画布也可以做到这一点，但是，它必须被附加，然后隐藏。

更新 5（值得检查）：

我做了一个肮脏的 polyfill，现在，画布背景在 Webkit 和 Mozilla 浏览器中都得到了支持。

更新 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... http://jsfiddle.net/psyketom/3VBMJ/18/。这不是真正的背景图像，它只是在 HTML 中注入的 SVG，并且它的容器元素已pointer-events: none应用于它，以禁用任何鼠标输入。

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

更新 2：

通过将我们之前作为内联 html 的所有内容倒入它自己的文件中，我们可以将SVG 用作background-image. 签入 Chrome 和 Fox - 两者都适用。

更新 3：

我做了一个快速的兼容性测试——Chrome (27.0.1453.116 m) 有效，Firefox (22.0) 有效，IE (10.0.9200.16618) 有效，Opera (12.14 1738) 有效。

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

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

http://jsfiddle.net/psyketom/3VBMJ/21/

附加信息：

http://jsfiddle.net/psyketom/3VBMJ/17/看来，shadowBlurChrome 中的一般支持（红色框），但它缺乏对 PNG 的支持（笑脸）。

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

于 2013-07-07T18:36:57.250 回答
0

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

但我认为，如果你也只定义模糊和散布，它就会起作用。

你用什么浏览器？

你有没有尝试过

-moz-box-shadow:    0px 0px 5px 2px #282a2d;
-webkit-box-shadow: 0px 0px 5px 2px #282a2d;
于 2013-07-07T18:23:33.360 回答
0
  • <body>首先你不能在标签后面创建一个阴影
  • 要在您的网页中有阴影，您需要使用 div 创建一个容器，或者通过使用<div class="x">your data</div> 或在您的数据中创建一个表数据<table><tr><td class="x">your data</td></tr></table>
  • 现在使用类 x 给阴影
  • 现在<div>你的代码就像

。X{

webkit-box-shadow: 0px 0px 10px 7px #606060;

moz-box-shadow: 0px 0px 10px 7px #606060;

盒子阴影：0px 0px 10px 7px #606060;

}

  • 现在<table>你的代码就像

td.x{

webkit-box-shadow: 0px 0px 10px 7px #606060;

moz-box-shadow: 0px 0px 10px 7px #606060;

盒子阴影：0px 0px 10px 7px #606060;

}

于 2013-07-07T19:13:04.127 回答