影響

在本教學課程中，您將獲得以下知識：

1. 混合
2. 半透明
3. 邊界
4. 陰影框
5. 2D 和 3D 轉換
6. 變化
7. 吸收器
8. 背景篩子
9. 指針
10. 發生次數

知情人士提示： 您可以在懸停階段或設定選單中的任何其他階段實施大部分影響。更深入研究配置對不同階段的影響。

混合

Webflow 中的混合方法為實體提供了一系列不同的方法來與其他底層元素混合（或重疊） - 所有這些都不需要自訂程式碼。 Webflow 為您管理混合混合模式 CSS 功能，允許定義實體的內容應如何與其父級內容和實體的背景混合。混合模式揭示了多種創造性的可能性，超越了單純的元素透明度調整。

有 16 種混合模式。功能類似的模式在混音器下拉清單中緊密分組。這些模式分組包括：

• 典型模式（普通）
• 調光模式（Dim、Multiply 和 Color scald）
• 增亮模式（增亮、螢幕和色彩減淡）
• Stark 模式（疊加、柔光和強光）
• 相對模式（差異和排除）
• 統一模式（色相、飽和度、色彩和亮度）

要查看每種混合模式的範例並進一步深入研究其應用程序，請探索我們的混合模式教程。

半透明

若要修改實體及其子實體的透視級別，請變更影響設定中的半透明度。您可以透過在輸入區域中輸入數值或將半透明度滑桿移至您的首選設定來調整半透明度。

半透明度值以百分比定義。 100%表示不透明，0表示完全透明。

邊界

邊框旨在幫助您的網站訪客在使用鍵盤瀏覽互動式元件時瀏覽您的設計。實體周圍的邊框使訪客清楚地知道他們正在與哪個元素進行互動（他們的注意力集中在一個特定元素上）。再次按下鍵盤上的 Tab 時，下一個新對焦的元素周圍會出現邊框。

因此，添加邊框至關重要 居中（鍵盤） 國家或 居中 您的組件的狀態。

您可以控制邊框設定中的下列屬性：

• 設計 —指定包圍元素的邊框類型（例如，實線、虛線或點線）
• 寬度 — 指定邊框的厚度。此圖可以採用單位下拉清單中可用集合中的任何 CSS 單位
• 利潤 — 指定邊框與元素的邊緣或邊框之間的空間。此圖可以採用單位下拉清單中可用集合中的任何 CSS 單位
• 顏色 — 指定邊框的顏色

可以探索輸入值和單位的進一步見解。

至關重要的： 儘管如果您希望消除邊框樣式並恢復為預設瀏覽器配置，選擇“無”邊框樣式可能看起來很有吸引力，但請記住，此操作不會清除任何其他已建立的屬性（例如，寬度、邊距或顏色），並將導致邊框完全消失，導致無法存取和使用者體驗下降。

深入了解我們的邊界指南。

陰影框

陰影框包括元素矩形邊界外部或內部的裝飾。它們可用於將注意力或深度引導至按鈕、片段、div 區塊或網站上的任何其他元素。

您可以透過導覽至套用陰影方塊或形成多個陰影以在元素外部分層 設計面板 > 效果 > 陰影框.

您可以個性化陰影的類型、水平距離、垂直距離、模糊、擴散和顏色。

堆疊

您可以在「設計」面板中為大多數效果新增多個圖層。例如，您可以將多個陰影附加和分層到一個元素。

在影響設定中，您可以透過選擇“眼睛” 圖示並透過選擇“垃圾" 圖示.如果您希望修改每個影響的順序，只需選擇要重新排序的圖層並將其拖曳到所需的編號即可。

您對陰影框設定中的下列屬性擁有權限：

• 種類 — 在元素邊界內部或外部套用陰影
• 水平的 ——陰影的水平距離
• 垂直的 ——陰影的垂直距離
• 模糊 - 影響陰影模糊的清晰度
• 傳播 -指定陰影相對於其所在元素的邊界的延伸
• 顏色 -改變陰影的顏色和不透明度

更深入地了解輸入值和單位。

至關重要的： 動畫模糊會降低速度，因此不建議使用。

2D 和 3D 修改

您可以合併來自 設計面板 > 影響 > 2D 和 3D 修改 跨不同階段操縱元素的外觀和位置，例如懸停。

存在四類變更：

1. 轉移
2. 調整大小
3. 圍繞
4. 傾斜

點擊旁邊的省略號 2D 和 3D 修改 達到 更改設定 並微調變換原點、背面可見性、自我視角和後代視角。

與堆疊影響類似，您可以引入多種類型的更改，而不會放棄任何先前的設定。點擊“加”圖示來附加附加轉換。  

可以探索變更的進一步見解。

變化

修改會在元素的不同狀態之間產生平滑的動畫。可以自訂持續時間和緩動類型以產生不同的變更。修改的常見用途是元素上的懸停狀態，以確保它們在懸停時不會發生突然變化。

預設情況下，修改設定為無，表示它們將自動套用於所有狀態。任何州建立的每個屬性/風格都應包含修改。

若要進行修改，請導航至 設計面板 > 影響 > 變化，點選「加” 圖標，並指定以下屬性：

• 類型 — 受修改影響的屬性類型
• 期間 — 規定修改的持續時間，以毫秒 (ms) 為單位。您可以使用滑桿或透過在輸入區域中輸入持續時間值來調整預設持續時間（200ms）
• 寬鬆 ——決定修改的步調或速度。您可以插入值或啟動緩動編輯器來預覽預設或設計獨特的緩動效果

篩子

篩子對元素施加獨特的視覺衝擊力。它們還可以觸發懸停狀態的改變。您可以將篩子合併到影像、背景影片或任何其他元素上。篩子改變了整個元素的外觀，包括它的後代。

要整合篩子，請訪問 設計面板 > 影響 > 篩子，點選「加” 圖標，然後從下拉式選單中選擇任何篩子效果： 

• 模糊 ——模糊元素的內容。增加模糊半徑值將放大模糊等級。 0不會產生效果。
• 閃電— 表示亮度級別，範圍從 0 到 200%。值 100% 會將元素恢復到初始亮度。
• 對比 — 表示 0 到 200% 之間的對比等級。值為 100% 會將對比度重設為原始狀態。
• 色相偏移 - 調整影像或元素的色彩/色調。該值以度為單位測量。值 0 或 360 可恢復原始色調。您可以透過與方向轉盤上的點互動、點擊轉盤上的任意位置來設定角度、使用箭頭以 45 度增量順時針或逆時針旋轉或在輸入欄位中輸入所需角度來修改色調。
• 色彩飽和度 — 決定從 0% 到 200% 的顏色強度。值為 100% 會將其傳回原始飽和度。
• 灰階 — 將所有顏色轉換為灰階。 0%呈現原始影像，而100%則使其完全灰階化。
• 倒置 —反轉元素中的所有顏色。值 0% 顯示原始影像，100% 完全反轉顏色。
• 棕褐色 - 將復古的黃色外觀應用於影像或元素。 0% 代表原始影像，100% 完全是棕褐色調。