CSS 立體倒影是一種讓元素看起來像是懸浮在頁面上的效果。在網頁設計中，通常為了讓元素更加立體化和生動，我們會用到立體倒影。實現這一效果的方法有很多，下面我們來看一下最基礎的實現。

.element {
height: 200px;
width: 200px;
background-color: #ccc;
position: relative; /* 使得該元素定位 */
}
.element::after {
content: "";
position: absolute; /* 使得偽元素定位 */
height: 50%;
width: 100%;
bottom: -30%; /* 使得偽元素在父元素下方 */
z-index: -1; /* 將偽元素放在下一層級 */
box-shadow: 0 1px 1px rgba(0,0,0,0.15); /* 設置偽元素的立體倒影效果 */
transform: scaleX(1) scaleY(-0.3); /* 實現偽元素的垂直翻轉效果 */
}

以上代碼中，我們首先通過在元素上方添加一個絕對定位的偽元素來實現立體倒影的效果，接著通過設置偽元素在父元素下方和設置偽元素的 y 軸縮放值為負數來實現倒影的效果。最后通過使用 box-shadow 屬性來給偽元素添加陰影效果，使得倒影更加逼真。

當然，以上代碼中的效果還遠遠不夠完美。如果你想要讓立體倒影效果更加逼真，可以嘗試使用漸變效果、更加復雜的盒子陰影、以及更加靈活的偽元素定位方式等等。