滚动滞后CSS3框阴影属性？

Question

我box-shadow最近在页面的一部分中添加了，以为其提供与Mac OS X应用程序相同的阴影边框效果。看起来不错，但我注意到在页面上上下滚动会使其滞后。我通常只会在页面上贴满恼人的背景图像，大量图像和嵌入视频（咳嗽MySpace咳嗽）的页面上看到此图像。我最初决定使用box-shadow，因为我发现它可以消除使用图像的需要，从而消除滚动滞后的可能性。

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

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

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

然后我确实注意到了一些滚动滞后。我正在使用Firefox 3.5。

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

附带说明一下，有人知道是否有可能仅将框阴影应用于元素的顶部，左侧和右侧，而不是底部吗？我尝试过，1px -1px 10px但它仍然在底部显示阴影。如果我继续减少第二个偏移量，它将最终从底部移除阴影，但是顶部阴影现在变得越来越暗。

Answer 1

最好的选择是使用-moz-border-image。那应该解决您的两个问题。

例如，您可以使用像这样的图像 结合这样的CSS

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

创建阴影。而且由于您使用的是图像，因此您也可以根据需要省略底部阴影。

您将无法使用-moz-box-shadow; 删除底部的阴影。它不被称为“盒子阴影”。它将阴影应用于整个框。您不能像使用一样分别为每侧指定阴影border。您能做的最好的事情就是摆弄阴影的位置，模糊和散布。但这不可避免地导致对面的阴影变暗。

在Stackoverflow上尝试时，也会出现阴影阴影滞后。当我尝试时-webkit-box-shadow，它也会影响Safari的性能，尽管它不像Firefox那样引人注目。希望将来性能会有所提高，但是我认为阴影始终会产生一些影响，因为据我所知，阴影是由软件渲染的。