在HTML5中，可以通过CSS3的阴影（Shadow）属性来实现倒影效果。阴影属性允许我们给元素添加一个或多个阴影，这些阴影可以在元素的下面或旁边创建，甚至可以沿路径创建。以下是如何使用CSS实现倒影效果的详细步骤。

基本原理

要实现倒影效果，我们可以给元素添加一个与原始元素大小和位置相同的阴影，但是颜色要设置为稍微透明的黑色，并将阴影的位置设置为与元素底部相对的上方。这样就可以在视觉上创建出一个倒影。

代码实现

以下是一个简单的HTML和CSS代码示例，展示如何为一个图像添加倒影效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5倒影效果</title>
<style>
  .image-container {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
  }

  .image-container img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .image-container:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('image.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.5;
    transform: scaleX(-1); /* 水平翻转，创建倒影效果 */
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="image.jpg" alt="Image with Reflection">
</div>

</body>
</html>

代码解析

  1. .image-container 是包含图像和其倒影的容器。
  2. .image-container img 定义了图像本身。
  3. .image-container:after 是伪元素，用于创建倒影。这里使用了 background 属性来设置倒影的背景图像。
  4. top: 100%; 和 left: 0; 确保倒影在图像下方。
  5. opacity: 0.5; 设置了倒影的透明度，使其看起来更像是真实的倒影。
  6. transform: scaleX(-1); 是关键，它将图像水平翻转，从而创建出倒影效果。

总结

通过使用CSS3的阴影属性，可以在HTML5中轻松实现倒影效果。以上代码只是一个简单的示例，你可以根据自己的需求调整图像的大小、位置、透明度和倒影的方向。