滚动滞后与CSS3 box-shadow属性？ [英] Scroll Lag with CSS3 box-shadow property?

问题描述

我最近添加了一个 box-shadow 到页面的某一部分，使其具有在Mac OS X应用程序上看到的相同的阴影边框效果。它看起来不错，但我注意到，页面上下滚动使它滞后。我通常只会看到这些页面上有烦人的背景图片和大量的图像和嵌入的视频抹上了所有（咳嗽MySpace咳嗽 ）。我最初决定使用box-shadow，因为我想它会删除使用图像的需要，这将消除任何滚动滞后的可能性。

I added a box-shadow to a section of a page recently to give it the same shadow border effect that is seen on Mac OS X apps. It looked great, but I noticed that scrolling up and down on the page made it lag. I usually only see this on pages that have annoying background images and tons of images and embedded videos plastered all over (cough MySpace cough). I originally decided to use box-shadow since I figured that it would remove the need to use an image, which would remove any possibility of scroll lag.

我知道CSS3仍然是新的，但这是滞后的原因吗？是阴影是软件呈现还是什么？当我把盒子阴影应用到较小的元素，它不落后。我只是想知道其他人是否经历过这个。

I know that CSS3 is still new, but is this the reason for the lag? Is the shadow being software rendered or something? When I apply the box shadow to smaller elements, it doesn't lag at all. I'm just wondering if anyone else has experienced this.

我刚刚在Stack Overflow首页，在 #content div使用Firebug设置：

I just tried it on the Stack Overflow front page, on the #content div using Firebug with a setting of:

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

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

And I did notice some scroll lag afterwards. I am using Firefox 3.5.

我的问题是，如果我要为我的页面的一部分添加Mac OS X样式边框，使用这个属性有什么替代方法？

My question is, what are some alternatives to using this attribute if I want to add a Mac OS X style border to a section of my page?

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

On a side note, does anyone know if it is possible to apply the box shadow only to the top, left, and right sides of the element and not the bottom? I tried 1px -1px 10px but it still shows the shadow on the bottom. If I keep decreasing the second offset, it eventually removes the shadow from the bottom but then the top shadow is now way darker and bigger.

是的，我看到了Box-shadow上的文章：

And yes, I have seen the articles on box-shadow at:

• CSS3信息


• fredericiana的博客

• CSS3 Info
• fredericiana's blog

推荐答案

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

Your best bet would be to use -moz-border-image instead. That should solve both your issues.

例如。您可以使用这样的图片， http://i28.tinypic.com/2njzkt1.png ，结合CSS像这样

E.g. you could use an image like this, http://i28.tinypic.com/2njzkt1.png, combined with CSS like this

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

创建阴影。

您在使用图片时， 不能使用 -moz-box-shadow 删除底部的阴影;它不是所谓的盒子阴影什么也没有。它对整个盒子应用阴影。您不能单独指定每个边的阴影，例如 border 。你可以做的最好的是围绕着放置，模糊和阴影的蔓延。但是，这不可避免地导致在对面一个更暗的阴影。

You're not going to be able to remove the shadow from the bottom using -moz-box-shadow; it's not called "box shadow" for nothing. It applies a shadow to the entire box. You can't specify a shadow for each side separately like with border, say. The best you could do is fiddle around with the placement, blur and spread of the shadow. But that inevitably leads to a darker shadow on the opposite side.

我得到框阴影滞后，当我在Stackoverflow尝试。它影响Safari上的性能，当我尝试 -webkit-box-shadow ，虽然它不像在Firefox中那么明显。该性能将有望在未来改善，但我认为阴影将永远有一些影响，因为我知道它是软件呈现。

I get the box shadow lag as well when I try it on Stackoverflow. It affects performance on Safari as well when I try -webkit-box-shadow, though it isn't as noticeable as in Firefox. The performance will hopefully improve in the future, but I presume the shadow will always have some impact since as far as I know it is software rendered.

这篇关于滚动滞后与CSS3 box-shadow属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！