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

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