如何为圆形图像添加鼠标悬停阴影效果？

【问题标题】：How do I add a mouseover drop shadow effect for circular images?如何为圆形图像添加鼠标悬停阴影效果？
【发布时间】：2013-06-23 02:48:12
【问题描述】：

我正在尝试实现类似于https://www.popexpert.com 的中间部分，其中悬停在圆形图像上会激活投影效果。我怎样才能做到这一点？我尝试使用 CSS，但阴影效果导致了方形阴影。

【问题讨论】：

标签： javascript css dropshadow

【解决方案1】：

您可以使用 CSS3 的 box-shadow 和 transition 属性来实现该效果。这是JSFiddle 中的工作示例。请注意，我使用了border-radius 属性来制作一个圆圈。

【讨论】：

【解决方案2】：

类似这样的：

JSFiddle Demo

HTML

<a href="#">test</a>

CSS

a {
    width:100px;
    height:100px;
    display:block;
    background:yellow;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
a:hover {
    -webkit-box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 3px 3px rgba(0, 0, 0, 0.3);
}

【讨论】：