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

Question

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

Answer 1

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

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