이미지에 광선 추가

Question

here (이 경우에는 양식 필드에서 포커스가 설정 됨)과 비슷한 효과를 얻으려고합니다. 그러나 나는 그것을 작은 이미지 주위에 놓기를 원한다. 분명히 두 개의 스프라이트를 만들 수 있고 CSS에서 이미지를 호버에있는 광선 이미지로 바꿀 수 있지만 애니메이션에는 포함되지 않습니다. 그래서 현재 내가 가진 :

img.glow { 
    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 
} 

img.glow:hover { 
    border-color: rgba(82, 168, 236, 0.8); 
    outline: 0; 
    outline: thin dotted \9; 
    /* IE6-9 */ 

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
} 

이 작동하지만 문제는 내 이미지가 모서리가 둥근 것을하고 광선 효과가 전반적으로 이미지 주위에 발생합니다 (예 : IT는 사각형으로 이미지를 처리하고 작은 잎 글로우가 이미지의 가장자리를 포옹하고 싶을 때, 글로우 내의 흰 모서리). 이미지는 투명한 PNG입니다. 내가하고 싶은 일이 가능한가? 당신의 IMG 요소가 좋은 둥근 모서리를 가질 수 있도록

감사합니다, G

Answer 1

그냥하는 border-radius 속성을 추가 할 수 있습니다. 그림자는 요소의 모양을 따릅니다.