CSS倒影特效是一種常見的網頁設計元素，通過使用CSS屬性和偽元素，可以實現文字、圖片等元素的倒影效果。下面我們來看一些CSS倒影特效的實現方法。

/*文字倒影*/
.text{
position: relative;
z-index: 1;
}
.text::before{
content: "";
position: absolute;
z-index: -1;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
transform: scaleY(-1);
}
/*圖片倒影*/
.img{
position: relative;
z-index: 1;
}
.img::after{
content: "";
position: absolute;
z-index: -1;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
transform: scaleY(-1);
}

以上代碼中，通過設置元素的偽元素實現了倒影效果。通過設置z-index屬性和子元素相互覆蓋，同時使用線性漸變的背景色和transform的scaleY屬性實現了倒影反轉的效果。

CSS倒影特效能夠給網頁制作帶來更多的美感，同時也能夠增加用戶體驗。希望大家在日后的web設計中能夠充分運用這個特效。