CSS倒影是通過給原始圖像添加一個鏡像副本，然后旋轉和翻轉該副本，并給其添加透明度來創建的。這可以為您的圖像添加一些獨特的效果，使其更加引人注目。

要添加倒影，我們需要在CSS中使用偽元素（pseudo-elements）和transform屬性。

/* 圖像容器的樣式 */
.image-container {
position: relative;
}
/* 創建偽元素并設為鏡像 */
.image-container::after {
content: "";
position: absolute;
opacity: 0.4;
left: 0;
bottom: -20%;
width: 100%;
height: 130%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.9) 95%, rgba(255, 255, 255, 1) 100%);
transform: scaleY(-1) rotateX(-40deg);
transform-origin: bottom;
}
/* 調整樣式以適應您的圖像 */
.image-container img {
display: block;
width: 100%;
height: auto;
}

上面的代碼中，.image-container類表示我們的圖像容器。我們創建了一個偽元素::after，并將它設為圖像的鏡像。我們使用opacity屬性將其不透明度降低，使其看起來更自然。

我們還使用了transform屬性來旋轉并翻轉該元素。使用transform-origin屬性可以確保倒影緊貼底部。

最后，您還需要對圖像樣式進行設置，以確保其適合您的倒影。在此示例中，我們將圖像設為100%的寬度，并自適應高度。

使用上述代碼的效果如圖所示：

現在，您已經知道如何在CSS中創建一個簡單的倒影了。您可以通過自定義偽元素和樣式屬性來調整其大小、顏色和透明度，使其更符合您的設計需求。