我最近在页面的某个部分添加了一个 box-shadow 以赋予它与在 Mac OS X 应用程序上看到的相同的阴影边框效果。它看起来不错，但我注意到在页面上上下滚动会使它滞后。我通常只在有烦人的背景图像和大量图像以及到处贴满嵌入式视频的页面上看到这种情况(咳嗽 MySpace 咳嗽)。我最初决定使用 box-shadow，因为我认为它可以消除使用图像的需要，从而消除任何滚动延迟的可能性。
我知道 CSS3 仍然是新的，但这是滞后的原因吗？阴影是软件渲染的还是什么？当我将框阴影应用于较小的元素时，它一点也不滞后。我只是想知道是否还有其他人遇到过这种情况。
我刚刚在 Stack Overflow 的首页上尝试了它，在 #content div 上使用 Firebug 设置为:
-moz-box-shadow: 1px 1px 10px;
之后我确实注意到了一些滚动延迟。我使用的是 Firefox 3.5。
我的问题是，如果我想将 Mac OS X 样式的边框添加到我的页面的某个部分，除了使用此属性还有哪些替代方法？
附带说明一下，有谁知道是否可以将框阴影仅应用于元素的顶部、左侧和右侧而不是底部？我尝试了 1px -1px 10px 但它仍然在底部显示阴影。如果我继续减少第二个偏移量，它最终会从底部移除阴影，但顶部阴影现在变得更暗、更大。
是的，我在以下位置看到了关于 box-shadow 的文章:
最佳答案
你最好的选择是使用 -moz-border-image反而。这应该可以解决您的两个问题。
例如你可以使用这样的图像，
, 像这样结合 CSS
-moz-border-image: url(shadow.png) 10 / 10px;
创建你的影子。由于您使用的是图像，因此如果需要，您也可以省略底部阴影。
您将无法使用 -moz-box-shadow 从底部移除阴影；它不是白叫“盒子影子”。它将阴影应用于整个框。例如，您不能像使用 border 那样分别为每一侧指定阴影。你能做的最好的事情就是摆弄阴影的位置、模糊和扩散。但这不可避免地会导致对面出现较暗的阴影。
当我在 Stackoverflow 上尝试时，我也遇到了框阴影滞后问题。当我尝试 -webkit-box-shadow 时，它也会影响 Safari 的性能，尽管它不像在 Firefox 中那样明显。性能有望在未来得到改善，但我认为阴影总会产生一些影响，因为据我所知，它是软件呈现的。
关于performance - 使用 CSS3 box-shadow 属性滚动滞后？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1249619/