如何为圆形 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

您可以通过为 CSS3 使用框阴影生成器来做到这一点。

CSS3 box-shadow generator

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

Answer 2

对于图像，我会使用框阴影属性 :

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

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

Answer 3

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

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

How to add a shadow to a circular CSS image?

css

image

shadow