滚动的滞后与CSS3框影财产？

Question

我加入 box-shadow 一部分的一页最近得到同样的阴影边境的效果上看到Mac OS X应用程序。它看起来很棒，但我注意到，上下滚动在网页上使它成滞后。我通常只看到这个网页上，有烦人的背景图像和吨的图像和嵌入式的视频上都贴满了(咳嗽MySpace咳嗽).我最初决定使用框阴影，因为我认为，它将需要使用的图像，其中将删除任何可能性的涡滞后。

我知道，CSS3仍是新的，但这是因为滞后？是的阴影正在软件呈现的东西？当我申请的箱子的影子小元素，它并不落后。我只是想知道，如果任何人有这样的经历。

我只是尝试它在栈溢前页上 #content div使用萤火虫一定：

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

我没有注意到有些滚动滞后。我使用的火狐3.5.

我的问题是，什么是一些替代品使用这种属性如果我想添加一个Mac OS X风格的边境一部分的我的页面?

在一个侧面说明，任何人都不会知道如果这是可能的应用的阴影只有到上，左，右侧的元素并不是底部？我试过了 1px -1px 10px 但它仍然表示上的影子的底部。如果我继续下降的第二偏，它最终消除影子从下，但随后顶的阴影，现在的方式更深和更大。

是的，我已经看过的文章框影：

• CSS3信息
• fredericiana的博客

Answer 1

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

E.g。你可以使用一个像这样的， 结合CSS喜欢这个

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

创建你的阴影。因为你们使用图像，你可以离开了底层阴影，还有，如果你想要的。

---

你不能删除阴影从底部使用 -moz-box-shadow;这不是所谓"阴影"为什么。它适用于一个阴影的整个框。你不能指定一个阴影，每个侧面分别像带 border, 说.最好你可以做的是小提琴的位置，模糊和蔓延的阴影。但是，这不可避免地导致一个黑暗的阴影相反一侧。

我得到的阴影的滞后，以及当我试试它在计算器.它会影响性能在野生动物园，以及当我试试 -webkit-box-shadow, 虽然它不是为明显，因为在火狐。性能也会希望提高在未来，但我相信的阴影总是会有 一些 影响的因为我知道它 是 软件渲染。

Answer 2

这已经被固定在其作为对两天前。:)

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

你可以拿起铬夜间进行尝试。

我看着FF3.6FF4并没有看到可怕的滚动性，所以它可能是解决有作为。

Answer 3

问题仍然存在，在铬对安卓为目前的日期。一些盒子-影子组合的结果在一个贫穷的滚动性能。在我的情况下，堆叠的两个插页箱阴影(例如上/下)导致所描述的问题。唯一的解决办法我可以提供的是使箱阴影较不复杂和再试一次...这为我工作。这是不能令人满意的，但是代替u也可以使用的边界图像的解决方案，或者删除受影响的框阴影。希望这得到固定尽快，最后。顺便说一句中的火狐没有问题了(我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

风格 固定 对图像太过载性能浏览器