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

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

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

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

Answer 3

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

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

3 个答案: