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

Question

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

Answer 1

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

Answer 2

像这样的东西：

JSFiddle演示

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