CSS文字倒影是一種很酷的視覺效果，可以讓文字看起來更加生動(dòng)、立體。那么，如何設(shè)置CSS文字倒影呢？下面我們來介紹一下。

/* 首先，我們要?jiǎng)?chuàng)建一個(gè)文本容器 */
.container {
width: 300px; /* 容器寬度 */
height: 100px; /* 容器高度 */
position: relative; /* 相對(duì)定位 */
}
/* 接著，創(chuàng)建文字樣式 */
.text {
color: #333; /* 文字顏色 */
font-size: 30px; /* 字號(hào)大小 */
font-family: Arial, sans-serif; /* 字體 */
}
/* 現(xiàn)在，我們開始創(chuàng)建倒影 */
.text::after {
content: ""; /* 空內(nèi)容 */
display: block; /* 塊級(jí)元素 */
width: 100%; /* 寬度 */
height: 30px; /* 高度 */
position: absolute; /* 絕對(duì)定位 */
left: 0; /* 左側(cè)對(duì)齊 */
bottom: -10px; /* 底部下移10像素 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 倒影顏色，使用漸變 */
transform: scaleY(-1); /* scaleY 轉(zhuǎn)換，垂直翻轉(zhuǎn) */
}

以上代碼中，我們首先創(chuàng)建了一個(gè)文本容器和文字樣式。接著，在文字樣式的 ::after 偽元素中，我們?cè)O(shè)置了一個(gè)高為 30px、寬為 100% 的塊級(jí)元素，并將其絕對(duì)定位到文字的底部，同時(shí)使用線性漸變?cè)O(shè)置了倒影的顏色，最后使用 transform: scaleY(-1) 進(jìn)行了垂直翻轉(zhuǎn)，實(shí)現(xiàn)了文字倒影的效果。

如果你想要讓倒影更加明顯，可以適當(dāng)增加其高度或調(diào)整漸變的透明度。