# Effects 效果

1. 混合模式
2. 不透明性
3. 輪廓
4. 盒狀陰影
5. 二維和三維變換
6. 濾鏡
7. 背景濾鏡
8. 光標

## 混合模式

Webflow中的混合模式為元素提供了各種不同的方式，使其與下面的其他元素混合（或重疊），而這些都不需要自定義代碼。

Webflow為您處理混合模式的CSS屬性，並允許您設定元素的內容將如何與該元素的父級內容和元素的背景混合。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FX42dwiX2dNK6AqCcihHI%2Fimage.png?alt=media\&token=03618fd0-560a-4da6-a64e-3bf3f22c8771)

\
總共有16種混合模式，這些模式分組包括：

• 默認模式（正常）\
• 變暗模式（變暗、相乘和燒色）\
• 變亮模式（變亮、屏幕和顏色閃避）\
• 對比模式（疊加、柔光和硬光）\
• 比較模式（差異和排除）\
• 複合模式（色相、飽和度、顏色和光亮度）

## 不透明度

設定一個元素及其子元素的透明度水平，可以在效果設置中改變不透明度。您可以透過在輸入框中輸入一個值或者拖動不透明度滑塊到想要的值來改變不透明度。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FcdGG3lCz4WexRbdA21Rm%2Fimage.png?alt=media\&token=1821fde2-ec45-4129-8806-7de40eb4b355)

## 輪廓

輪廓是為了幫助網站訪問者在您的設計中進行導航，使訪問者清楚地知道他們正在與特定的元素進行互動。\
如果使用者再次按下鍵盤上的Tab鍵，輪廓就會出現在下一個新關注的元素周圍。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F5o5bRg22ggdMYL9Jhqhi%2Fimage.png?alt=media\&token=12e8a0e9-d207-4eaa-9be6-a7fa2226d23d)

在輪廓設置中，有以下控制：

1. 樣式：實線、虛線或點線
2. 寬度：輪廓的厚度，這個值可以使用單位下拉列表中的任何CSS單位
3. 偏移：輪廓與元素的邊緣或邊界之間的空間大小，這個值可以使用單位下拉列表中的任何CSS單位
4. 顏色：輪廓的顏色

**重要提示**\
如果想刪除輪廓樣式並恢復到默認的瀏覽器設置，為它選擇"無"可能很誘人，但請記住，這不會刪除任何其他已經設置的屬性（例如，寬度、偏移量或顏色），而且有可能會使輪廓完全消失。

## 盒狀陰影

盒狀陰影在元素的矩形邊界之外或之內添加造型。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Ff5ydD4k5ntN1J7st2058%2Fimage.png?alt=media\&token=75419431-76c4-4204-96a0-bd064650cc9b)

盒狀陰影可以用來為按鈕、部分、div塊或項目中的任何其他元素添加焦點或深度。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F0T5e1WZcyes2GE3Qaoxg%2Fimage.png?alt=media\&token=08fd06da-ad73-4c1e-a213-bf61c8572d38)

### 堆疊

您可以在樣式面板中為大多數效果添加多個層，例如可以為元素添加多個盒狀陰影並疊加。

在效果設置中，可以透過選擇眼睛圖標來切換每一層的可見性，選擇垃圾桶圖標來刪除每個層。要改變每個效果的順序，只需選擇想重新排序的層並拖移到想要的順序號即可。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FeLGhVsBqoUizQK5qI2RM%2Fimage.png?alt=media\&token=3ecc6e22-d387-4358-b212-bce807fb63ff)

在盒子陰影設置中，有以下控制：

1. 類型：在元素的邊界內或邊界外應用陰影
2. 角度：改變箱體陰影的方向
3. 距離：在設定的角度指定的方向上將陰影移近或移遠
4. 模糊：影響陰影模糊的集中程度
5. 尺寸：指定陰影相對於它所在元素的邊界的分布情況
6. 顏色：改變陰影的顏色和不透明度

## 二維和三維變換

從 "樣式"面板>"效果">"二維和三維變換"中添加變換，以操縱元素的外觀和在不同狀態下的位置，如懸停。

有4種類型的變換:

1. 移動
2. 縮放
3. 旋轉
4. 傾斜

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FZYXjF6W1tMjVXOGXg49G%2Fimage.png?alt=media\&token=06086ef7-bcbc-4d65-97ec-5ecb4628711a)

點擊二維和三維變換旁邊的省略號，進入變換設置，調整變換原點、背面可見度、自我視角和兒童視角。

與堆疊效果類似，可以添加一種以上的變換類型，而不會丟失之前的任何設定。使用加號圖標來添加一個額外的變換。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fuz0hEkmaBWRsfdrFDqip%2Fimage.png?alt=media\&token=29aa2395-d1a1-4180-bad3-e0b1fdeabd85)

## 濾鏡

濾鏡對元素應用獨特的視覺效果，也可以用來創建懸停狀態的變化。\
您可以在圖像、背景視頻或任何其他元素上添加濾鏡，改變整個元素的外觀，包括其子元素。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FehhawLxGwmmSDTRrbo6J%2Fimage.png?alt=media\&token=672c394a-4ad2-4c2d-be86-6c86119b69fb)

要添加一個濾鏡，使用添加選單，在下拉選單中選擇任何一個濾鏡的效果。

1. 模糊：模糊元素的內容
2. 亮度：指定0到200%之間的亮度量
3. 對比度：指定0到200%之間的對比度
4. 色調旋轉：轉移圖像或元素的顏色/色調。值的單位是度。0或360的值會使它恢復到原來的色調。
5. 飽和度：顏色的強度
6. 灰階：將所有顏色轉換為灰階
7. 顛倒：顛倒元素中的所有顏色
8. Sepia：給圖像復古的淡黃色外觀

您添加或調整的任何濾鏡將在畫布上預覽，您也可以為元素添加多個濾鏡，並在濾鏡設置中切換它們的可見性和順序。

## 背景濾鏡

給任何元素添加背景濾鏡，可以讓元素邊界內的透明區域應用濾鏡效果（如模糊、色移、對比等）。元素後面任何透明區域可見的東西都會受到背景濾鏡的影響。

您也可以對一個元素應用多個背景濾鏡，將背景濾鏡分層並組合在一起，以創造各種視覺效果。

**注意**\
因為背景濾鏡適用於元素後面的所有東西，必須使元素、元素的部分或其背景至少部分透明才能看到這個效果。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FLeZiiX3FxgxWsU9b1OHw%2Fimage.png?alt=media\&token=d923caa2-6b6c-4f28-9162-ac67e6e9bb2d)

總共有8個背景濾鏡，這些濾鏡的分組包括：

1. 一般（模糊）
2. 顏色調整（亮度、對比度、色調旋轉和飽和度）
3. 色彩效果（灰階、反轉和棕褐色）

## 光標

使用正確的光標對於向用戶表明他們在瀏覽頁面時將會發生什麽很重要，但使用與結果不匹配的光標會導致混亂或不作為。

默認的光標值是自動。它將為特定的元素類型呈現默認的光標，這是由瀏覽器的默認設置所指定的。例如懸停在連結上會顯示指針光標，而懸停在文本上會顯示文本光標。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F0s6EcxVDlJvn3dLWGWyl%2Fimage.png?alt=media\&token=22be313d-1af1-4d0c-b14e-d6fd936087ba)

在大多數情況下，最好是保持這個默認設置，讓瀏覽器選擇正確的光標，也就是說您可以通過改變樣式面板中的光標值來覆蓋瀏覽器對某個元素的默認光標。