为图像添加光晕

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 元素有漂亮的圆角。阴影将跟随元素的形状。