在網頁設計中，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 class="text">文字倒影效果</div>

通過以上 CSS 代碼，我們可以輕松實現文字倒影效果。你可以根據實際需求調整樣式參數，使得效果更符合自己的網頁設計要求。