CSS 立體倒影是一種讓元素看起來像是懸浮在頁面上的效果。在網(wǎng)頁設(shè)計(jì)中，通常為了讓元素更加立體化和生動(dòng)，我們會(huì)用到立體倒影。實(shí)現(xiàn)這一效果的方法有很多，下面我們來看一下最基礎(chǔ)的實(shí)現(xiàn)。

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

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

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