CSS 테두리 스타일을 전환 할 수 없습니까?

Question

요소에 마우스를 올리면 배경 색상과 텍스트 색상이 변경되는 간단한 애니메이션이있는 메뉴가 있습니다.

요소에는 시작 스타일이있는 테두리가 있기 때문에 앞으로 다시 들여다 보도록 인셋으로 변경하고 싶습니다. 그러나 전환은 테두리 스타일 속성에서 작동하지 않는 것처럼 보이므로 테두리 스타일의 변경이 즉시 발생하고 나중에 배경이 변경되므로 최종 효과가 잘 보이지 않습니다.

이 아이디어를 만드는 방법에 대한 아이디어가 있으십니까? 나는 경계 스타일이 바뀔 수 없다는 것이 이상하다는 것을 알았다. 그렇다면 모든 전환점이 있습니까?

#main_menu a, #main_menu li { 
    -webkit-transition: all 0.4s ease-in-out 0s; 
-moz-transition: all 0.4s ease-in-out 0s; 
-o-transition: all 0.4s ease-in-out 0s; 
-ms-transition: all 0.4s ease-in-out 0s; 
transition: all 0.4s ease-in-out 0s; 
} /*Hover animation */ 

#main_menu li:hover { background: #4488CC; border-style: inset; } 

#main_menu li { 
     /*GRAPHICS*/ 
    list-style: none; 
    border: 3px outset #496181; 
    margin: 10px; 
    background: #333; 

PS :

여기 코드의 난이

Answer 1

Here 위해 jQuery를 사용하지 않으려는 거기에 CSS를 사용하여 애니메이션의 예이며 경계가 올바르게 변화 것으로 보인다.

도움이 될지 확인하십시오.

행운을 빌어 요,

이

Answer 2

가 귀하의 질문은 급하게 작성,하지만 난 당신이 첫 번째 선택의 _ 누락 있다고 생각되었을 수 있습니다. 또한 border-style을 outset에서 outset으로 움직이는 것으로 보이므로 차이점이 표시되지 않습니다. 그것은 실제로 작동합니다, 나는 jsfiddle에 border-color을 변경하는 데모를 만들었습니다.

Answer 3

다른 해결책은 테두리 이미지를 단추 이미지로 만들고 div에서 이미지를 늘리고 상자 그림자를 사용하는 것입니다. 그렇게하면 그림자에서 전환하여 부드러운 버튼 이동을 볼 수 있습니다.