客製化CSS屬性和特性

若要自訂 HTML 元素，您可以插入 層疊樣式表 (CSS) 屬性到類別或選擇器。在 Webflow 中，「樣式」面板允許存取許多 CSS 屬性（例如，位置、溢出、框陰影等）——但是，它不支援 全部 CSS 屬性。

透過利用自訂的 CSS 屬性和規範，您可以整合樣式面板本身不支援的更廣泛的 CSS 屬性和值。這增強了您的設計靈活性，並減少了個人化程式碼嵌入的必要性，從而簡化了您的設計工作流程。

評論： 不支援將具有受限瀏覽器支援的 CSS 屬性和具有供應商前綴（例如 -webkit）的屬性作為個人化屬性。

有用的見解： 某些 CSS 屬性可能會影響網站效能。我們建議優化複雜 CSS 函數和屬性的使用，同時在可行的情況下盡量減少廣泛的 CSS 使用。

在本教程中，您將掌握：

1. 如何整合客製化的屬性和價值觀
2. 如何將個人化值連結到 Webflow 相容屬性
3. 如何實現個人化價值觀的變數
4. 常見詢問和解決問題的技巧

如何整合客製化的屬性和價值觀

開始之前： 在元素上建立一個類別或利用 HTML 標籤選擇器來選擇一組要向其附加自訂屬性的元素。

要將個人化屬性附加到類別中：

1. 選擇您想要強制實施個人化屬性的元素
2. 訪問 風格面板 > 自訂屬性
3. 點選 添加
4. 輸入 CSS 屬性 指定 在指定欄位中（例如，文字裝飾顏色）
5. 輸入一個 價值 在現場（例如，#146EF5）
6. 打 進入 在你的鍵盤上

內幕提示： 您可以使用涉及高階函數（例如 calc()、color-mix() 等）的自訂值，以獲得更準確且動態的設計影響。

內幕提示： 您可以在其中插入多行CSS 風格面板 > 自訂屬性。 Webflow 自動地 組織 CSS 並將其應用到所選元素。

當您輸入屬性名稱時，可存取屬性和對應鍵盤快速鍵的自動完成編譯（例如， 命令 + 1, 命令 + 2等）將會實現。若要自動化屬性字段，請按 命令 （在 Mac 上）或 控制 （在 Windows 上）+ 數位 顯示在所需屬性旁的自動完成清單中，或使用 向上 和 向下 鍵盤上的按鍵突出顯示您要使用的屬性並按下 進入 或者 標籤 選擇它。

內幕提示： 當應用一系列自訂屬性和值時，您可以按 標籤 輸入一個值後記錄該值 和 開始您要新增的以下屬性。

當您引入自訂的屬性和值時，設計器畫布會立即反映您的變更。如果插入 Webflow 相容屬性並為其指派自訂值，它將取代「樣式」面板中設定的任何現有值。與「樣式」面板中套用的任何樣式類似，您也可以為不同的斷點賦予不同的值。

如果您打算查閱 MDN documentation 以了解特定屬性，請將滑鼠停留在屬性名稱上並點擊 在 MDN 上查看。你還可以持有 命令 （在 Mac 上）或 控制 （在 Windows 上）在鍵盤上點擊屬性名稱以在新分頁中解鎖其 MDN documentation。

若要從類別或標籤中刪除個人化屬性，請將滑鼠懸停在要刪除的屬性上，然後點擊“垃圾" 圖示.

如何將個人化值連結到 Webflow 相容的 CSS 屬性

雖然您可以透過輸入個人化值將其附加到現有的 Webflow 相容屬性 風格面板 > 自訂屬性，您也可以將個人化值直接連結到那些 Webflow 相容的字體、大小和顏色屬性：

1. 啟動 風格面板
2. 按一下或將滑鼠懸停在您希望套用個人化值的輸入欄位上（例如，寬度屬性的輸入）
3. 點選紫色“點” 圖示 — 請記住紫色“點” 圖示僅出現在字體、大小和顏色屬性上
4. 點選 風俗 標籤
5. 輸入一個 個性化價值 在現場（例如，clamp(1rem, 1.5rem, 1.5rem)）

評論： 您無法對背景屬性（例如，背景顏色、背景大小等）或任何子屬性（例如，box-shadow: 2px custom-value-offset 3px 4px #146EF5）使用自訂 CSS 值。

如果您打算將個人化值套用至非字體、大小或顏色屬性，您可以先將個人化值附加到 風格面板 > 自訂屬性.

若要將個人化值與 Webflow 相容屬性分離，請點選您想要刪除的個人化值，然後點選「取消連結" 圖示.一旦取消鏈接，該值將恢復為 Webflow 中的預設值（例如，寬度恢復為自動，不透明度恢復為 100% 等）。

如何利用個人化價值觀中的變數

您可以將變數整合到您的個人化價值觀中。

評論： 如果個人化 CSS 值與變數值的類型相同，則您只能將變數用作個人化 CSS 值（例如，您只能將顏色變數設定為接受顏色值的個人化屬性的值）。

要將變數與屬性值相關聯：

1. 發起 變數面板
2. 將滑鼠懸停在您想要用作個人化 CSS 值的變數上
3. 點選設定“齒輪" 圖示
4. 點選 CSS 複製其值的欄位（例如，var(–webflow-blue)）
5. 選擇您想要套用個人化屬性的元素
6. 前進至 風格面板 > 自訂屬性
7. 點選 添加
8. 輸入 CSS 屬性 指定 在欄位中（例如，文字裝飾顏色）
9. 貼上您從複製的值 CSS 領域中的 價值 場地
10. 打 進入 在你的鍵盤上

評論： 如果您變更個人化值中使用的變數名稱，則需要手動更新個人化值以進行對齊。

常見問題與故障排除

我渴望使用供應商前綴的個人化 CSS 屬性，但自動完成清單中沒有該選項。

不支援將具有受限瀏覽器支援的 CSS 屬性和具有供應商前綴（例如 -webkit）的屬性作為個人化屬性。

我希望在屬性上定義個人化值，但該屬性不在自動完成清單中。

目前您無法為下列屬性定義個人化值：

• 背景
• 背景附件
• 背景圖
• 背景位置
• 背景重複
• 背景大小
• 字體變化設定
• 過渡
• 轉換延遲
• 過渡持續時間
• 過渡性質
• 轉換定時函數

我的個人化值導致輸入錯誤。

請確保您設定的值是有效的 CSS 並且受您選擇的屬性支援。將滑鼠懸停在屬性名稱上並點擊 在 MDN 上查看 存取 MDN documentation 並確保屬性和值設定正確。

我的個人化屬性和價值沒有反映在設計師畫布上。

如果屬性和值已正確配置，但未反映在設計器畫布上，請仔細檢查網站上和/或自訂程式碼嵌入元素中的任何自訂程式碼，並消除任何衝突的屬性和值。您還應該檢查是否存在任何衝突的普通寫法和 速記屬性 — 例如，如果您使用中的控制項定義了 margin-top 風格面板 > 間距和 在中附加了速記邊距屬性 風格面板 > 自訂屬性，一個值可能優先於另一個值。

我的個人化屬性和價值未在發布的網站上呈現。

如果屬性和值配置正確，但未在已發佈的網站上呈現，請確認您正在測試的瀏覽器支援該屬性和值。你可以 訪問我可以使用嗎？地點 並蒐索 CSS 屬性以確定其瀏覽器相容性。

如果問題仍然存在，或報告任何其他問題，請 聯絡客戶支援團隊 以及複製問題的步驟。