# 自訂 CSS 屬性和值

#### 在 Webflow 中引入擴充功能的自訂 CSS 屬性和值支持

我們很高興推出 Webflow 的顛覆性更新：迄今為止最全面的 CSS 屬性擴展，現在已完全整合到 Webflow Designer 中。此更新引入了自訂 CSS 屬性和值，增強了我們的支持，涵蓋了近 90% 的所有可用屬性。這項關鍵的增強功能直接在我們直覺的視覺化開發介面中為我們的用戶提供了先進的樣式功能，簡化了工作流程並加深了 CSS 探索的潛力。

#### 我們對網路開發超級大國的承諾

自訂 CSS 屬性和值增強了 Webflow 內的設計功能，減少了對自訂程式碼的依賴，使設計過程更加直覺和高效，從而解鎖了其他用例。 

**版式和文字效果**

* **進階排版**：嘗試使用[text-wrap](https://www.w3.org/TR/2024/WD-css-text-4-20240219/#propdef-text-wrap)來平衡文字流，嘗試[使用 text-decoration-thickness](https://www.w3.org/TR/2022/WD-css-text-decor-4-20220504/#propdef-text-decoration-thickness)來自訂底線樣式，嘗試使用text-underline-offset來實現精確定位。這些附加功能以及其他功能提供了對文字樣式的詳細控制，並且可以與動畫配合使用以實現動態效果。

**視覺增強**

* **主題管理**：在CSS中使用諸如currentColor和inherit之類的值可以透過允許元素適應其父級的顏色和樣式來簡化深色和淺色模式等用例的主題，從而以最少的程式碼確保網站不同主題之間的一致性。 

**自訂形狀和蒙版**

* **剪輯路徑和遮罩：借助**[剪輯路徑](https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-clip-path)和[遮罩圖像](https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-image)等屬性，設計人員可以製作更複雜的形狀和細緻入微的圖像效果，例如漸變和有機、不完美的幾何形狀，添加深度和圖層以實現複雜性和更豐富的細節。 

**可訪問性和用戶偏好**

* **使用者偏好：**[強調顏色](https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-accent-color)和[強制顏色調整](https://www.w3.org/TR/2022/CRD-css-color-adjust-1-20220614/#propdef-forced-color-adjust)等新屬性增強了網站的可訪問性和可用性，確保為所有使用者提供更好的體驗。

**進階功能** 

* **函數作為值：將屬性與**[calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)、[clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)、[max()](https://developer.mozilla.org/en-US/docs/Web/CSS/max) / [min()](https://developer.mozilla.org/en-US/docs/Web/CSS/min)和[var()](https://developer.mozilla.org/en-US/docs/Web/CSS/var)等函數結合，在直覺的框架內實現響應式、自適應的佈局和版式，將網頁設計的複雜程度提升到新的水平。

#### 客戶聚焦：Jon Cole 與 CSS Calc 函數

*「隨著 Webflow 對 CSS 功能的擴展，我們可以魚與熊掌兼得。此更新透過自訂 CSS 屬性和高級功能豐富了我們的工具包，為 Blockhead 等框架引入了無與倫比的靈活性。其中，calc() 透過簡化類型大小調整而脫穎而出，允許將 REM 轉換為像素等效值，以增強適應性，而不會失去基於像素的系統的清晰度。我可以看到它也為客戶工作提供了促進，calc() 確保程式碼庫功能豐富，並且針對獨特的設計要求進行定制，而無需進行太多權衡。 - Jon Cole，自由 Web 開發人員和*[*Webflow 框架的創建者 Blockhead*](https://www.blockheadcss.dev/styleguide)

#### 你會創造什麼？

探索 Webflow 中擴展的 CSS 屬性和值的廣闊世界，並發現它們對您的專案的影響。無論您是深入專業發展還是剛起步，這些功能都旨在激發您的創造力並優化您的設計流程。立即嘗試並使用 Webflow 釋放網頁設計的全部潛力！

加入我們的[直播](https://webflow.com/livestreams/custom-properties)，我們將深入探討 Webflow 中自訂 CSS 屬性和值的令人興奮的功能。親眼目睹這些更新的力量以及它們如何改變您的設計工作流程。

***

February 20, 2024