CSS3是一种用来设计网页样式的语言，其中的倒影效果是一种很酷炫的效果，可以给图片增添立体感和美观度。在CSS3中添加倒影效果比以前更容易，只需要用到几个新的CSS属性就能轻松实现。下面我们来看看如何使用CSS3来制作倒影效果。

/* 步骤1: 定义原始图片样式 */
.img-container {
position: relative;
}
.img-container img {
display: block;
width: 100%;
height: auto;
}
/* 步骤2: 定义倒影样式 */
.img-container:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 50%; /* 倒影高度 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)); /* 渐变颜色 */
transform: scaleY(-1); /* 垂直翻转 */
}

以上代码中，我们使用了:before和:after伪类来为原始图片添加倒影。其中:before用来添加上面的阴影效果，而:after用来添加下面的倒影效果。具体而言，我们是通过定义一个高度为50%的背景渐变来制作倒影的效果，并使用transform: scaleY(-1)来实现垂直翻转的效果。

通过这个简单的CSS样式，我们就可以轻松实现倒影效果。倒影效果不仅可以用在图片上，还可以用在文字和按钮等其他元素上，相信这样的效果一定会给我们网页制作带来全新的视觉感受。