CSS是前端开发中使用频率较高的语言，可以用来实现各种效果，其中倒影效果也很常见，本文将介绍如何使用CSS制作倒影效果。

要实现倒影效果，需要用到CSS3中的transform和filter属性。首先需要在需要应用倒影的元素上添加一个父元素wrapper，将需要应用倒影的元素放在这个wrapper元素中。

接下来，在wrapper元素中添加以下CSS样式：

.wrapper {
position: relative;
}
.wrapper:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
filter: blur(10px) brightness(75%);
transform: scaleY(-1);
}

在这段代码中，我们定义了wrapper的position为relative，这样就可以让wrapper的子元素即需要应用倒影的元素相对于它进行定位。接着我们使用了:after伪元素为wrapper添加了一个伪元素，在该伪元素中定义了倒影的样式，包括倒影的位置、大小、过渡的颜色及亮度等，这样就可以实现最基本的倒影效果。

其中值得注意的是，在倒影的高度中需要定义一个百分比，该百分比需要与需要应用倒影的元素的高度相等，这样才能显示出正确的效果。

通过以上简单的CSS样式代码，就能实现一个基本的倒影效果，让页面更加美观。