文字倒影效果是一種常見(jiàn)的CSS樣式效果，可以使文字在頁(yè)面上呈現(xiàn)出倒影的效果，增加了頁(yè)面的美感和視覺(jué)效果。下面介紹一種常見(jiàn)的實(shí)現(xiàn)方法。

.reflection {
display: inline-block; 
position: relative; 
padding-bottom: 2px; 
overflow: hidden; 
}
.reflection:after {
content:""; 
display: block; 
position: absolute; 
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); 
width: 100%; 
height: 50%; 
top: 100%; 
left: 0; 
transform: scaleY(-1); 
}

首先，我們需要給顯示文本的標(biāo)簽加上position: relative;屬性，以便在其中定位后代元素。此外，添加display: inline-block;屬性，可以使塊級(jí)元素以行內(nèi)元素的方式顯示。然后，我們需要?jiǎng)?chuàng)建一個(gè)正常顯示文本和倒影的容器，在容器中設(shè)置padding-bottom: 2px;屬性，來(lái)為倒影留出一定的空間。

接著，在容器中添加一個(gè)偽元素:after，并設(shè)置其屬性content:""; display: block;。偽元素在定位時(shí)需要設(shè)置position: absolute;，因?yàn)檫@樣它可以脫離文檔流，不會(huì)影響其他元素的位置。其次，我們需要使用 CSS3 漸變屬性background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%);，使倒影的透明度從底部往上逐漸變化。設(shè)置top: 100%;和transform: scaleY(-1);可以使倒影反轉(zhuǎn)并出現(xiàn)在正常文本的下方。

最后，將創(chuàng)建好的容器的類名添加到需要顯示倒影的文本標(biāo)簽中即可。使用以上代碼，您可以輕松地在網(wǎng)頁(yè)中添加文字倒影效果，提升頁(yè)面的美觀程度。