Свойство CSS3 box-shadow вызывает плавность выпадающего меню

Я использую многоуровневое CSS-меню jQuery #2 для одной из моих тем WordPress. .

Но когда я добавляю свойство box-shadow CSS3 в свой основной div для тени фонового окна, эффект выпадающего меню становится медленным и не таким плавным, как предполагалось.

Но когда я удаляю свойство box-shadow CSS3 из основного div, эффект выпадающего меню становится совершенно гладким. Это мой основной 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;
}

Я делаю что-то неправильно?


css dropshadow
person Hooshkar    schedule 13.01.2011    source источник
comment
предоставьте код, пожалуйста .. что ваш основной включает в свой html?   -  person Stefanos Kalantzis    schedule 13.01.2011

Ответы (1)


arrow_upward
0
arrow_downward

Анимированные тени очень медленные, потому что их приходится пересчитывать каждый раз, когда они двигаются. Вы увидите улучшение производительности, если уменьшите радиус тени, т.е.:

-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*/
person methodofaction    schedule 13.01.2011