容器陰影是用陰影呈現元素的視覺效果。您可以透過選擇文字元素並導航到來來存取文字陰影 風格面板 > 效果 > 容器陰影.
透過本指南,您將發現:
- 如何產生容器陰影過渡
- 如何製作容器陰影邊框
進行容器陰影過渡的方法
您可以合併容器陰影過渡,因此當訪客與元素互動時,容器陰影會改變其視覺顯示。例如,您可以在元素上實現懸停效果,這將導致容器陰影的色調在懸停時變得更暗:
- 選擇您想要包含容器陰影過渡的元素
- 前往 風格面板 > 效果 > 容器陰影
- 按 ”加” 圖示插入容器陰影
- 修改 色調 變為黑色並加入 20% 不透明度
- 將容器陰影合併到元素中,並使用黑色色調和 20% 不透明度進行設計
- 選擇 徘徊 來自 狀態 下拉式選單
- 訪問 風格面板 > 效果 > 容器陰影
- 將容器陰影配置為 55% 不透明度
- 選擇 沒有任何 來自 狀態 下拉式選單
- 前往 風格面板 > 效果 > 過渡
- 點擊 ”加” 圖示插入過渡
- 挑選 容器陰影 來自 類型 下拉式選單
- 建立一個 期間 或保持預設200ms
應用過渡後,懸停效果將在 沒有任何 國家和 徘徊 狀態。如果沒有 200 毫秒的過渡,懸停效果將在不同的不透明度等級之間突然切換。
製作容器陰影邊框的方法
您可以在單一元素上套用多個容器陰影以產生不同的視覺效果。以下是利用多個容器陰影創建微妙邊框和陰影的範例:
- 選擇要包含容器陰影過渡的元素
- 去 風格面板 > 效果 > 容器陰影
- 打 ”加” 圖示插入容器陰影
- 挑選 外部 作為 類型
- 調整 X 和 是 基於偏好的價值觀
- 放 模糊 到 0 像素
- 放 尺寸 至 1 像素
- 放 顏色 至 rgba(0,0,0,0.1) – 黑色,不透明度 10%
- 將陰影的色調調整為 rgba(0, 0, 0, 0.1)(即不透明度為 10% 的黑色)
- 訪問 風格面板 > 效果 > 容器陰影
- 按 ”加” 圖示插入另一個容器陰影
- 放 模糊 至 8 像素
- 修改 X 和 是 基於偏好的價值觀
- 放 顏色 轉為 rgba(0, 0, 0, 0.1)
Ewan Mak 的最新帖子 (看全部)
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日