CSS @property 規則

定義和用法

CSS @property 規則用于在樣式表中直接定義自定義 CSS 屬性，而無需運行任何 JavaScript。

@property 規則具有數據類型檢查和約束功能，可以設置默認值，并定義屬性是否可以繼承值。

使用 @property 的好處：

• 類型檢查和約束：必須指定自定義屬性的數據類型，例如 <number>、<color>、<length> 等。這可以防止錯誤并確保正確使用自定義屬性。
• 設置默認值：可以為自定義屬性設置默認值。這確保了如果后續分配了無效值，瀏覽器會使用定義的回退值。
• 設置繼承行為：必須指定自定義屬性是否可以從其父元素繼承值。

舉例：定義自定義屬性

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

上述定義表示 --my-color 是一個顏色屬性，它可以從父元素繼承值，且其默認值為 lightgray。

在 CSS 中使用自定義屬性：

body {
  backgound-color: var(--my-color);
}

實例

例子 1

為漸變指定兩個自定義屬性 - 并使用它們來動畫化漸變：

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

親自試一試

例子 2

指定兩個自定義屬性：一個用于項目大小，一個用于項目顏色：

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

親自試一試

CSS 語法

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

屬性值

瀏覽器支持

表格中的數字表示首個完全支持該 @ 規則的瀏覽器版本。

相關頁面

教程：CSS @property 規則