CSS3のボックスシャドウプロパティがメニュードロップダウンの滑らかさを引き起こしています

Question

私のワードプレステーマの1つにjQuery Multi Level CSS Menu #2を使用しています。

しかし、バックグラウンドボックスのシャドウのメインdivにCSS3のボックスシャドウプロパティを追加すると、メニューのドロップダウンエフェクトが遅くなり、それほど滑らかではありません。

しかし、削除すると、メニューのドロップダウンエフェクトよりもメインdivのCSS3ボックスシャドウプロパティが完全に滑らかになります。 これが私のメインの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; 
} 

私が何か間違ったことをやっていますか？

Answer 1

アニメーションシャドウは、移動するたびに再計算する必要があるため、非常に遅いです。

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

しかし、私はdropshadowsをドロップ（HA！）、代わりに半透明の境界線を使用します：あなたはあなたのドロップシャドウの半径を減らす場合、すなわち、パフォーマンスの向上が表示されます

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