CSS3 box-shadow 属性导致菜单下拉平滑

发布于 2024-10-11 18:33:12 字数 520 浏览 2 评论 0原文

我正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

静水深流 2024-10-18 18:33:12

动画阴影非常慢,因为每次移动时都必须重新计算。如果减小投影的半径,您将看到性能改进,即:

-webkit-box-shadow: 0 0 3px #000000;

但我会删除投影(哈!)并使用半透明边框代替:

 border: solid #ccc 10px; /*for older browsers*/
 border: solid rgba(255,255,255,0.3) 10px; /*transparent border*/

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.:

-webkit-box-shadow: 0 0 3px #000000;

But I would drop dropshadows (ha!) and use a semitransparent border instead:

 border: solid #ccc 10px; /*for older browsers*/
 border: solid rgba(255,255,255,0.3) 10px; /*transparent border*/
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文