CSS3是一種用來設計網頁樣式的語言，其中的倒影效果是一種很酷炫的效果，可以給圖片增添立體感和美觀度。在CSS3中添加倒影效果比以前更容易，只需要用到幾個新的CSS屬性就能輕松實現。下面我們來看看如何使用CSS3來制作倒影效果。

/* 步驟1: 定義原始圖片樣式 */
.img-container {
position: relative;
}
.img-container img {
display: block;
width: 100%;
height: auto;
}
/* 步驟2: 定義倒影樣式 */
.img-container:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 50%; /* 倒影高度 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)); /* 漸變顏色 */
transform: scaleY(-1); /* 垂直翻轉 */
}

以上代碼中，我們使用了:before和:after偽類來為原始圖片添加倒影。其中:before用來添加上面的陰影效果，而:after用來添加下面的倒影效果。具體而言，我們是通過定義一個高度為50%的背景漸變來制作倒影的效果，并使用transform: scaleY(-1)來實現垂直翻轉的效果。

通過這個簡單的CSS樣式，我們就可以輕松實現倒影效果。倒影效果不僅可以用在圖片上，還可以用在文字和按鈕等其他元素上，相信這樣的效果一定會給我們網頁制作帶來全新的視覺感受。