CSS @property 規則
示例
為漸變指定兩個自定義屬性 - 並使用它們來製作漸變動畫
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
@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);
}
瀏覽器支援
表格中的數字表示完全支援該規則的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| @property | 85 | 85 | 128 | 16.4 | 71 |
CSS 語法
@property --propertyname {
syntax: "<color>";
initial-value: red;
inherits: false;
}
屬性值
| 值 | 描述 |
|---|---|
| --propertyname | 必需。自定義屬性的名稱。 |
| syntax initial-value inherits |
syntax 的合法值：可以是 <length>、<number>、<percentage>、<length-percentage>、<color>、<image>、<url>、<integer>、<angle>、<time>、<resolution>、<transform-function> 或 <custom-ident>，或資料型別和關鍵字值列表。 +（空格分隔）和 #（逗號分隔）乘數表示期望值列表，例如 <color># 表示期望的語法是 <color> 值的一個逗號分隔列表。 垂直線 (|) 可以建立期望語法的“或”條件，例如 <length> | auto 接受 <length> 或 auto，而 <color># | <integer># 則期望 <color> 值或 <integer> 值的逗號分隔列表。 initial-value 的合法值：設定屬性的初始值。 inherits 的合法值： True 或 false。控制 @property 指定的自定義屬性是否預設繼承。 |
更多示例
示例
指定兩個自定義屬性：一個用於專案大小，一個用於專案顏色
@property --item-size {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --item-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS - @property 規則
