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

为图像添加光晕

1 个答案: