CSS3 상자 그림자 속성으로 인해 메뉴 드롭 다운 부드러움이 발생합니다

내 워드 프레스 테마 중 하나에 jQuery Multi Level CSS Menu #2을 사용하고 있습니다.CSS3 상자 그림자 속성으로 인해 메뉴 드롭 다운 부드러움이 발생합니다

그러나 CSS3 상자 그림자 속성을 기본 div에 배경 상자 그림자로 추가 할 때 메뉴 드롭 다운 효과가 느려지고 원활하지 않습니다.

그러나 제거 할 때 메뉴 드롭 다운 효과보다 CSS3 상자 그림자 속성이 주부에서 완벽하게 매끄럽게됩니다.

#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; 
}

내가 뭔가 잘못하고 있는가 : 이 내 주요 사업부입니까?

출처

2011-01-13 Hooshkar

을 당신이 당신의 DropShadow의 반경, 즉 줄일 경우 성능 향상을 볼 수 .. 당신의 "메인"은 당신의 html에 무엇을 포함합니까? –

움직일 때마다 애니메이션 그림자가 다시 계산되어야하기 때문에 애니메이션 그림자가 매우 느립니다.

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

하지만 (하!) dropshadows을 삭제하고 대신 반투명 테두리를 사용합니다 : : 몇 가지 코드를 제공하십시오

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

출처

2011-01-13 13:05:13 Duopixel

CSS3 상자 그림자 속성으로 인해 메뉴 드롭 다운 부드러움이 발생합니다

답변

관련 문제