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

How do I add a mouseover drop shadow effect for circular images?

本文关键字：悬停 鼠标 阴影 添加 图像      更新时间：2023-09-26

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

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

类似这样的东西：

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);
}
相关文章：