CSS3 box-shadow 属性导致菜单下拉平滑
我正在使用 jQuery 多级 CSS 菜单 #2 作为我的 WordPress 主题之一。
但是,当我向主 div 添加 CSS3 box-shadow 属性作为背景框阴影时,菜单下拉效果会变慢,并且不像预期的那样平滑。
但是当我从主 div 中删除 CSS3 box-shadow 属性时,菜单下拉效果变得非常平滑。 这是我的主要内容:
#main { background: #fff; margin-top:20px; margin-bottom:0px; -moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
我做错了什么吗?
I am using jQuery Multi Level CSS Menu #2 for one of my wordpress theme.
But when I add a CSS3 box-shadow property to my main div, for background box shadow, than the menu drop down effect becomes slow down, and is not as smooth as it supposed to be.
But when I remove, the CSS3 box-shadow property from the main div, than the menu drop down effect becomes perfectly smooth.
This is my main div:
#main { background: #fff; margin-top:20px; margin-bottom:0px; -moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
Am I doing something wrong?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
动画阴影非常慢,因为每次移动时都必须重新计算。如果减小投影的半径,您将看到性能改进,即:
但我会删除投影(哈!)并使用半透明边框代替:
Animated shadows are very slow because they have to be recaulculated every time they move. You will see a performance improvement if you reduce the radius of your dropshadow, i.e.:
But I would drop dropshadows (ha!) and use a semitransparent border instead: