Question

我最近在页面的一部分添加了box-shadow，以便为其提供与Mac OS X应用程序相同的阴影边框效果。它看起来很棒，但我注意到在页面上上下滚动使它变得滞后。我通常只会在有令人讨厌的背景图像和大量图像和嵌入式视频的页面上看到这一点（咳嗽MySpace咳嗽）。我最初决定使用盒子阴影，因为我认为它将消除使用图像的需要，这将消除任何滚动滞后的可能性。

我知道CSS3仍然是新的，但这是滞后的原因吗？阴影是软件渲染还是什么？当我将框阴影应用于较小的元素时，它根本不会滞后。我只是想知道是否有其他人经历过这个。

我刚刚使用Firebug在#content div上的Stack Overflow首页上尝试了它，设置为：

-moz-box-shadow: 1px 1px 10px;

之后我注意到了一些滚动滞后。我使用的是Firefox 3.5。

我的问题是，如果我想在页面的某个部分添加Mac OS X样式边框，那么使用此属性有哪些替代方法？

在旁注中，是否有人知道是否可以将框阴影仅应用于元素的顶部，左侧和右侧而不是底部？我试过1px -1px 10px，但它仍然显示底部的阴影。如果我继续减少第二个偏移量，它最终会从底部移除阴影，但顶部阴影现在变得更暗更大。

是的，我已经看过关于box-shadow的文章：

Answer 1

您最好的选择是使用-moz-border-image代替。这应该可以解决你的问题。

E.g。你可以使用这样的图像，，结合像这样的CSS

-moz-border-image: url(shadow.png) 10 / 10px;

创建你的影子。而且，由于您正在使用图像，因此如果您愿意，也可以省略底部阴影。

您无法使用-moz-box-shadow从底部移除阴影;它没有被称为“盒子阴影”。它将阴影应用于整个框。你不能像border一样单独为每一面指定一个阴影，比方说。你能做的最好的事情就是摆弄阴影的位置，模糊和扩散。但这不可避免地导致对方的阴影更深。

当我在Stackoverflow上尝试时，我也得到了盒子阴影延迟。当我尝试使用-webkit-box-shadow时，它会影响Safari的性能，尽管它不像Firefox那样明显。性能有望在未来得到改善，但我认为影子总会产生一些影响，因为据我所知是软件渲染。

Answer 2

两天前已在webkit中修复此问题。：）

https://bugs.webkit.org/show_bug.cgi?id=22102

你可以每晚拿出铬来试试。

我查看了FF3.6和FF4，并没有在那里看到可怕的滚动表现，所以也可以在那里解决。

Answer 3

截至当前日期，Chrome for Android仍然存在该问题。一些盒阴影组合导致滚动性能差。在我的情况下，堆叠两个插入框阴影（例如顶部/底部）导致所描述的问题。我能提供的唯一解决方案是让盒子阴影不那么复杂，然后再试一次......这对我有用。这不令人满意，但是你也可以使用边框图像解决方案或完全删除受影响的盒子阴影。希望这很快得到解决。顺便说一下Android版的Firefox不再有问题了（对于我的css3）。此外，在我的情况下，两种浏览器的桌面版本都不受影响。

Answer 4

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

旧浏览器和新浏览器的跨浏览器版本。简单的img：http://i28.tinypic.com/2njzkt1.png

style ：fixed for images too overload perfomance browser

使用CSS3 box-shadow属性滚动延迟？

4 个答案: