在設計中，倒影是物體的程式化鏡像。盡管它們不像陰影那樣流行，但它們也有使用它們的場景。

倒影還是十分好看的！與過去不同的是，我們實際上可以用 CSS 進行倒影！這是我們將在本文中制作的效果：

倒影設計有兩個步驟：

• 創建兩個相同的標簽
• 定義響應的樣式

現在在 CSS 中獲取鏡像的最真實和標準化的方法是使用該元素屬性。以下是基本的html代碼：

然后我們給它定義一個樣式：
 

background-clip最初的設計是一個由背景圖像、透明文本顏色和屬性及其text值組合而成的挖空文本圖形。
然后將這對的底部元素倒過來，并使用transform移動到更接近原始設計的位置：
 

現在朝上的底部元素將呈現一些樣式，以在反射上創建淡入淡出和其他圖形效果。可以使用線性漸變圖像作為朝上元素上的遮罩層來實現反射的逐漸淡化。

呈現效果：

我們還可以嘗試其他漸變樣式，將它們組合或不組合。以這件條紋為例。我添加了圖案以及之前的淡入淡出效果。

 

呈現效果：

或者這一個radial-gradient：



呈現效果：


skew()另一個想法是通過添加到transform屬性來變形鏡像。這給反射帶來了一些運動。


呈現效果：


或者模糊的效果：


呈現效果：



有時反射本身也可能是陰影的，因此，我沒有使用背景圖像（來自原始設計）或文本塊顏色，而是嘗試為反射提供一系列紅色、藍色和綠色的半透明陰影和原來的設計很好。


呈現效果：



最終所有效果展示：