將輝光添加到圖像

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

這工作，但問題是，我的形象已經圓角和周圍的圖像會出現光暈效果作爲一個整體（即它把圖像作爲一個正方形，並留下小發光中的白色角落，而我希望發光擁抱圖像的邊緣）。該圖像是一個透明的PNG。我想做什麼？

感謝， 摹

Answer 1

只需添加一個border-radius屬性，讓你的img元素具有良好的圓角。陰影將遵循元素的形狀。