使用CSS给图片添加阴影的方法

当我们想要让网页上的图片看起来更加立体、有层次感的时候，我们就会考虑在图片周围添加阴影效果。下面是使用 CSS 给图片添加阴影的方法的详细攻略：

步骤 1：准备 HTML 和 CSS 代码

首先，我们需要在 HTML 中插入要添加阴影的图片元素，如下所示：

<div class="shadow">
  <img src="path/to/image.jpg" alt="Picture description">
</div>

在这个示例中，我们使用 div 元素来包裹图片，并为其添加了一个类名 shadow，以便在 CSS 中进行样式调整。同时，我们也在图片元素中添加了一个 alt 属性，以提升页面的可访问性。

然后，我们需要在 CSS 中设置 .shadow 类的样式，以达到添加阴影的目的，示例代码如下：

.shadow {
  display: inline-block;
  position: relative;
}

.shadow::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

这段 CSS 代码的作用是：

• 将 .shadow 元素的 display 属性设置为 inline-block，以便在页面中能够水平排列；
• 将 .shadow 元素的 position 属性设置为 relative，以便作为 ::before 伪元素的参考对象；
• 使用 ::before 伪元素创建一个与图片等宽等高、在图片下方和右侧的阴影层；
• 将阴影层的 box-shadow 属性设置为 0px 0px 20px rgba(0, 0, 0, 0.3)，其中 20px 表示阴影大小，rgba(0, 0, 0, 0.3) 表示阴影颜色和不透明度。

步骤 2：调整阴影效果

如果上面这个 CSS 代码段不符合你的要求，你需要进行一些调整。以下是几个常见的示例：

调整阴影大小

你可以通过更改阴影层的宽度和高度来调整阴影的大小，如下所示：

.shadow::before {
  /* ... */
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

相应地，你可以将四个属性值设置为相同的值，以获得一个均匀的阴影大小。

调整阴影颜色和不透明度

你可以通过修改 box-shadow 属性中的 rgba 部分来调整阴影的颜色和不透明度，如下所示：

.shadow::before {
  /* ... */
  box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
}

在这个示例中，我们将颜色的红色部分更改为 255，表示一个红色的阴影效果。

结论

如此一来，我们就成功地为页面上的图片添加了阴影效果。除了上面的示例之外，你还可以根据需要进行更多自定义调整，以达到更好的视觉效果。

阅读剩余 41%