CSS元素倒影是一種常見的視覺效果，常常用于展示圖片或文本的反射效果。下面使用CSS代碼演示如何創(chuàng)建元素倒影。

/*元素倒影*/
.box {
position: relative;
width: 200px;
height: 200px;
}
.box::before {
content: "";
position: absolute;
left: 0;
bottom: -100px;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
transform: scaleY(-1);
opacity: 0.7;
}

首先，為元素添加相對定位，并定義寬度和高度。然后使用偽元素before創(chuàng)建倒影層，設置其為絕對定位，在元素的底部，寬度、高度均為100%。為了創(chuàng)建倒影的漸變效果，設置背景色為線性漸變，從底部到頂部，將黑色的透明度從0.2到0。最后通過transform: scaleY(-1)將其上下翻轉，創(chuàng)建出倒影效果。