我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但它仍然显示底部的阴影.如果我继续减小第二个偏移量,它最终会从底部移除阴影,但随后顶部阴影现在变得更暗更大.
是的,我看过关于盒子阴影的文章:
嘿那里,
这次我有一个非常罕见的问题,只在Safari 5.0.2中发生.使用CSS3的box-shadow参数时,Safari的性能很差,甚至无法正常向下滚动或与网站按预期进行交互.
我有一个<div class="blox"></div>平均大小(960x320像素),这些是相关的CSS设置:
-moz-border-radius: 4px; /* FF1+ */
-webkit-border-radius: 4px; /* Saf3-4 */
border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome */
-moz-box-shadow: inset 0px 0px 140px #dfe1e2; /* FF3.5+ */
-webkit-box-shadow: inset 0px 0px 140px #dfe1e2; /* Saf3.0+, Chrome */
box-shadow: inset 0px 0px 140px #dfe1e2; /* Opera 10.5, IE9 */
我尝试用jQuery(.css())设置CSS3 box-shadow,但结果是相同的(滞后).哦,边界半径不会导致这种情况(我通过多次测试将其丢弃).
那么,有什么解决方案吗？老实说,我很震惊,像Safari这样的WebKit浏览器甚至会出现这些问题.我知道必须有一种方法,因为几个网站使用插入和开始阴影并在Safari中运行得很好.我在StackOverflow中发现了一个帖子,其中提到了盒子图像作为解决方案..然而,这篇文章很老了.
我真的非常感谢你的时间和任何支持.
非常感谢你提前!
克里斯
当我在一个带有动画的元素上盘旋时,我注意到我的页面已经滞后了box-shadow.使用Chrome的Devtools,我注意到当我在元素上盘旋时整个页面都被重新绘制.重绘时间超过40毫秒,约为3帧.在transition持续大约半秒,所以在半秒有明显的滞后.
如何将重绘限制为仅具有框阴影的区域？
这是一个演示:http://jsfiddle.net/8sa41xfL/
html,body{
height:100%;
}
#test{
background:red;
height:100px;
width:200px;
transition:box-shadow 0.5s;
}
#test:hover{
box-shadow:0 0 3px 3px rgba(0,0,0,0.3);
}<div id=test></div>transform:translateZ(0)在我的页面上不起作用,但它适用于小提琴.还有另外一个解决方案transform:translateZ(0)吗？