要使用css創建逼真的陰影效果，需疊加多個陰影并調整光源角度、顏色和模糊度。1. 使用box-shadow和text-shadow屬性分別實現元素和文字的陰影效果；2. 通過設置h-offset、v-offset、blur、spread和color參數控制陰影位置、模糊程度和顏色；3. 疊加多個陰影模擬不同角度的光源，如右下角與左上角的組合；4. 調整陰影顏色為深灰或背景相近色以增強真實感；5. 結合transform屬性改變陰影形狀，如旋轉元素產生傾斜陰影；6. 在實際項目中應用于卡片、按鈕、模態框等組件提升視覺層次；7. 配合transition實現懸停時的動態陰影過渡效果。
陰影效果，簡單來說，就是給元素增加一層“投影”，讓它看起來更有立體感。css 實現陰影效果主要靠 box-shadow 和 text-shadow 這兩個屬性。box-shadow 用于元素盒子的陰影，text-shadow 則用于文字陰影。
box-shadow 和 text-shadow 的用法詳解
box-shadow 的語法如下：
立即學習“前端免費學習筆記（深入）”；
box-shadow: h-offset v-offset blur spread color inset;
- h-offset: 必需。水平陰影的位置。正值陰影在右邊，負值陰影在左邊。
- v-offset: 必需。垂直陰影的位置。正值陰影在下邊，負值陰影在上邊。
- blur: 可選。模糊距離。值越大，陰影越模糊。
- spread: 可選。陰影的擴散距離。正值陰影擴大，負值陰影縮小。
- color: 可選。陰影的顏色。
- inset: 可選。將陰影改為內陰影。
text-shadow 的語法類似：
text-shadow: h-offset v-offset blur color;
- h-offset: 必需。水平陰影的位置。
- v-offset: 必需。垂直陰影的位置。
- blur: 可選。模糊距離。
- color: 可選。陰影的顏色。
實際使用時，可以根據需求調整這些值。例如，想要一個右下角的淡淡陰影：
.element { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); } .text { text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); }
這里 rgba(0, 0, 0, 0.2) 表示黑色，透明度為 20%。
如何使用 CSS 制作逼真的陰影效果？
想要陰影更逼真，不能只依賴單一的 box-shadow。可以嘗試疊加多個陰影，模擬光線從不同角度照射的效果。例如：
.element { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(0, 0, 0, 0.1); }
這個例子中，一個陰影模擬右下角的光源，另一個陰影模擬左上角的光源。還可以調整 blur 和 spread 的值，讓陰影看起來更自然。另外，陰影的顏色也很重要，不要總是使用純黑色，可以嘗試深灰色或者與背景色相近的顏色。
除了疊加陰影，還可以結合 transform 屬性，讓元素傾斜或者旋轉，從而改變陰影的形狀和方向。例如，想要一個傾斜的陰影：
.element { transform: rotate(5deg); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }
這種方法可以創造出更具創意的陰影效果。
CSS 陰影效果在實際項目中的應用場景有哪些？
陰影效果在實際項目中應用非常廣泛。比如：
- 卡片式設計: 給卡片增加陰影，使其從背景中凸顯出來，增強視覺層次感。
- 按鈕: 給按鈕增加陰影，使其看起來更立體，提升用戶點擊的欲望。
- 模態框: 給模態框增加陰影，使其與頁面內容區分開，引導用戶關注。
- 文字排版: 給文字增加陰影，使其更易于閱讀，或者創造特殊的視覺效果。
除了這些常見的應用場景，還可以結合 CSS 動畫，讓陰影產生動態效果，增加頁面的趣味性。例如，鼠標懸停時，陰影逐漸變大：
.element { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease; } .element:hover { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }
這樣，當鼠標懸停在元素上時，陰影會平滑地過渡到更大的尺寸，給用戶帶來更友好的交互體驗。
