在网页设计中，CSS文字倒影是一种常见的效果，可以让文字看起来更加立体感强。下面我们来学习一下如何使用CSS实现文字倒影效果。

.text {font-size: 48px;color: #333;text-shadow: 1px 1px 1px #ccc; }.text::after {content: ''; display: block;width: 100%;height: 100%;position: absolute;top: 100%; left: 0;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transform: scaleY(-1); opacity: 0.3; }

以上代码中，我们使用了 ::after 伪元素来实现文字倒影效果。首先必须在 .text 样式中设置好字体大小、颜色及文字阴影效果。然后在 ::after 伪元素中，通过设置 top: 100%; 将伪元素移到文字下方。接着，通过设置 background 属性来定义渐变倒影的颜色，并通过 transform: scaleY(-1) 实现垂直翻转伪元素。最后，通过设置 opacity 属性来设置倒影的透明度。

在 HTML 中，我们只需在需要添加文字倒影的元素上添加 .text 样式即可：

<div >文字倒影效果</div>

通过以上 CSS 代码，我们可以轻松实现文字倒影效果。你可以根据实际需求调整样式参数，使得效果更符合自己的网页设计要求。