如何为圆形 CSS 图像添加阴影？

Question

试图弄清楚如何为页面中心的 3 张图片添加阴影，如果没有我相信的图片，我会觉得有点奇怪。

目前我的 HMTL 代码如下：

<div id="imagesMain">
    <img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\Gym.jpg" id="gym">
    <img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\me.jpg" id="me">
    <img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\NFL.jpg" id="nfl">
  </div>

这些图片的 CSS 代码也在下面：

#imagesMain {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    text-align: center;
    padding-top: 5px;
  }
  #imagesMain img {
    height: auto;
    width: 10%;
    vertical-align: middle;
    border-radius: 50%;
    padding: 5%;
    padding-bottom: 0;
    padding-top: 5px;
  }

谢谢，卡勒姆

Answer 1

尝试使用此filter: drop-shadow(1px 14px 5px rgb(14, 17, 17)); 并根据需要调整阴影...

Answer 2

您可以使用 CSS3 的 box-shadow 生成器来做到这一点。

CSS3 box-shadow generator

您需要复制 box-shadow 并将其添加到图像中。

Answer 3

对于图像，我会使用 box-shadow 属性：

div {
  box-shadow: 10px 10px 5px grey;
}

前两个参数是关于阴影框的高度/宽度，第三个参数是关于模糊效果，最后一个是阴影的颜色。