[分享]css中如何在图片下打阴影

在CSS中，通过添加阴影来美化图片是一种常见的技巧。这是通过使用boxshadow属性来实现的。下面我们来看一下如何在图片下面添加阴影。 首先，我们需要一个HTML代码片段，其中包含一张图片： ...

在CSS中，通过添加阴影来美化图片是一种常见的技巧。这是通过使用box-shadow属性来实现的。下面我们来看一下如何在图片下面添加阴影。
首先，我们需要一个HTML代码片段，其中包含一张图片：

<div class="container">
  <img src="example.jpg" alt="Example Image">
</div> 

然后，针对container类添加以下CSS代码片段：

.container {
  display: inline-block; /* 将容器设置为行内元素 */
  position: relative; /* 设置容器为相对定位 */
}
<br>
.container::after {
  content: ""; /* 添加内容 */
  position: absolute; /* 设置为绝对定位 */
  z-index: -1; /* 将伪元素放置在底部 */
  bottom: -10px; /* 定义距离容器底部的距离 */
  left: 0; /* 将其放置在容器左上角 */
  width: 100%; /* 宽度跨越整个容器 */
  height: 10px; /* 阴影高度 */
  box-shadow: 0px 0px 10px rgba(0,0,0,.7); /* 阴影属性 */
} 

我们通过为容器添加一个伪元素来覆盖阴影。该伪元素被设置为绝对定位并放置在容器底部。我们还定义了阴影的宽度、高度、颜色和偏移量。现在，我们已经完成了在图片下添加阴影的操作。
最后，让我们放上完整的HTML和CSS代码片段：

<div class="container">
  <img src="example.jpg" alt="Example Image">
</div>
<br>
<style>
.container {
  display: inline-block; /* 将容器设置为行内元素 */
  position: relative; /* 设置容器为相对定位 */
}
<br>
.container::after {
  content: ""; /* 添加内容 */
  position: absolute; /* 设置为绝对定位 */
  z-index: -1; /* 将伪元素放置在底部 */
  bottom: -10px; /* 定义距离容器底部的距离 */
  left: 0; /* 将其放置在容器左上角 */
  width: 100%; /* 宽度跨越整个容器 */
  height: 10px; /* 阴影高度 */
  box-shadow: 0px 0px 10px rgba(0,0,0,.7); /* 阴影属性 */
}
</style> 

现在我们可以在网站中为图片添加阴影，使其更加生动和吸引人。