容器陰影

容器陰影是用陰影呈現元素的視覺效果。您可以透過選擇文字元素並導航到來來存取文字陰影 風格面板 > 效果 > 容器陰影.

透過本指南，您將發現：

1. 如何產生容器陰影過渡
2. 如何製作容器陰影邊框

進行容器陰影過渡的方法

您可以合併容器陰影過渡，因此當訪客與元素互動時，容器陰影會改變其視覺顯示。例如，您可以在元素上實現懸停效果，這將導致容器陰影的色調在懸停時變得更暗：

1. 選擇您想要包含容器陰影過渡的元素
2. 前往 風格面板 > 效果 > 容器陰影
3. 按 ”加” 圖示插入容器陰影
4. 修改 色調 變為黑色並加入 20% 不透明度
5. 將容器陰影合併到元素中，並使用黑色色調和 20% 不透明度進行設計
6. 選擇 徘徊 來自 狀態 下拉式選單
7. 訪問 風格面板 > 效果 > 容器陰影
8. 將容器陰影配置為 55% 不透明度
9. 選擇 沒有任何 來自 狀態 下拉式選單
10. 前往 風格面板 > 效果 > 過渡
11. 點擊 ”加” 圖示插入過渡
12. 挑選 容器陰影 來自 類型 下拉式選單
13. 建立一個 期間 或保持預設200ms

應用過渡後，懸停效果將在 沒有任何 國家和 徘徊 狀態。如果沒有 200 毫秒的過渡，懸停效果將在不同的不透明度等級之間突然切換。

製作容器陰影邊框的方法

您可以在單一元素上套用多個容器陰影以產生不同的視覺效果。以下是利用多個容器陰影創建微妙邊框和陰影的範例：

1. 選擇要包含容器陰影過渡的元素
2. 去 風格面板 > 效果 > 容器陰影
3. 打 ”加” 圖示插入容器陰影
4. 挑選 外部 作為 類型
5. 調整 X 和 是 基於偏好的價值觀
6. 放 模糊 到 0 像素
7. 放 尺寸 至 1 像素
8. 放 顏色 至 rgba(0,0,0,0.1) – 黑色，不透明度 10%
9. 將陰影的色調調整為 rgba(0, 0, 0, 0.1)（即不透明度為 10% 的黑色）
10. 訪問 風格面板 > 效果 > 容器陰影
11. 按 ”加” 圖示插入另一個容器陰影
12. 放 模糊 至 8 像素
13. 修改 X 和 是 基於偏好的價值觀
14. 放 顏色 轉為 rgba(0, 0, 0, 0.1)