Jor*_*eña 11 css macos performance firefox css3
我box-shadow最近添加了一个页面的一部分,以使其具有与Mac OS X应用程序相同的阴影边框效果.它看起来很棒,但我注意到在页面上上下滚动使它变得滞后.我通常只会在有令人讨厌的背景图像和大量图像和嵌入式视频的页面上看到这一点(咳嗽MySpace咳嗽).我最初决定使用盒子阴影,因为我认为它将消除使用图像的需要,这将消除任何滚动滞后的可能性.
我知道CSS3仍然是新的,但这是滞后的原因吗？阴影是软件渲染还是什么？当我将框阴影应用于较小的元素时,它根本不会滞后.我只是想知道是否有其他人经历过这个.
我刚刚在Stack Overflow首页上#content使用Firebug 在div 上尝试了它,设置为:
-moz-box-shadow: 1px 1px 10px;
之后我注意到了一些滚动滞后.我使用的是Firefox 3.5.
我的问题是,如果我想在页面的某个部分添加Mac OS X样式边框,那么使用此属性有哪些替代方法？
另外,有人知道是否可以将盒子阴影仅应用于元素的顶部,左侧和右侧而不是底部？我试过1px -1px 10px但它仍然显示底部的阴影.如果我继续减小第二个偏移量,它最终会从底部移除阴影,但随后顶部阴影现在变得更暗更大.
是的,我看过关于盒子阴影的文章:
mer*_*tor 11
你最好的选择是使用-moz-border-image.这应该解决你的问题.
例如,你可以使用这样的图像,http://i28.tinypic.com/2njzkt1.png,结合这样的CSS
-moz-border-image: url(shadow.png) 10 / 10px;
创造你的影子.而且,由于您正在使用图像,因此如果您愿意,也可以省略底部阴影.
你无法使用从底部移除阴影-moz-box-shadow; 它没有被称为"盒子阴影".它将阴影应用于整个框.你不能单独指定每一面的阴影border,比如说.你能做的最好的事情就是摆弄阴影的位置,模糊和扩散.但这不可避免地导致对面的阴影更暗.
当我在Stackoverflow上尝试时,我也得到了盒子阴影滞后.当我尝试时-webkit-box-shadow,它也会影响Safari的性能,尽管它不像Firefox那样明显.性能有望在未来得到改善,但我认为影子总会产生一些影响,因为据我所知,它是软件渲染的.
这在两天前已在webkit中得到修复.:)
https://bugs.webkit.org/show_bug.cgi?id=22102
你可以每晚拿一块铬来试试.
我查看了FF3.6和FF4并没有看到可怕的滚动性能,所以也可以在那里解决.