CSS3是網頁開發中常用的技術之一，其中的倒影效果可以讓我們的網站更加生動有趣。下面，我們就來看一下如何使用CSS3實現倒影效果。

.box {
height: 200px;
width: 200px;
position: relative;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 50%;
left: 0;
bottom: -10px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
transform: scaleY(-1);
}

在這段代碼中，我們先創建了一個名為.box的樣式類，用來設置包裹要顯示倒影的元素的屬性。

然后，在.box中創建了一個:before偽元素，用來設置倒影的具體樣式，這個偽元素會在元素.box的前面被顯示。因為我們希望倒影能夠被放在原元素的下方，所以我們設置了它的z-index屬性為-1。同時，我們也設置了偽元素的高度為原元素高度的50%。

我們還使用了一個線性梯度來模擬倒影的形態，并且使用了transform的scaleY屬性將它進行了翻轉，使其呈倒影的形態。

最后，我們只需要在原元素的基礎上添加.box樣式類，就能夠實現倒影效果了！