CSS - @property 規則

❮ 上一個下一個 ❯

CSS @property 規則

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

@property 規則具有資料型別檢查和約束、設定預設值以及定義屬性是否可以繼承值。

定義自定義屬性的示例

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

上面的定義表示 --myColor 是一個顏色屬性，它可以從父元素繼承值，其預設值為 lightgray。

要在 CSS 中使用自定義屬性，我們使用 var() 函式

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

使用 @property 的好處

型別檢查：您必須指定自定義屬性的資料型別，例如 <number>、<color>、<length> 等。這可以防止錯誤並確保自定義屬性被正確使用。
設定預設值：您為自定義屬性設定一個預設值。這樣可以確保如果稍後分配了無效值，瀏覽器將使用定義的備用值。
設定繼承行為：您必須指定自定義屬性是否可以從其父元素繼承值。

瀏覽器支援

表格中的數字表示完全支援該規則的第一個瀏覽器版本。

屬性
@property	85	85	128	16.4	71

簡單的 @property 示例

以下示例定義了兩個自定義屬性：my-bg-color 和 my-txt-color。然後，div 在 background-color 和 color 中使用自定義屬性。

示例

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

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

div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
color: var(--my-txt-color);
}

自己動手試一試 »

另一個 @property 示例

在下面的示例中，我們在 <div> 元素上使用了預設的自定義屬性。然後我們在 .fresh 類和 .nature 類中覆蓋了自定義屬性（透過設定其他顏色），效果完美。

示例

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

div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}

.fresh {
--my-bg-color: #ff6347;
}

.nature {
--my-bg-color: rgb(120, 180, 30);
}

自己動手試一試 »

使用型別檢查和備用值避免錯誤

在下面的示例中，我們將 .nature 類中的自定義屬性設定為整數。這是無效的，瀏覽器將使用初始值屬性（lightgray）中定義的備用顏色。

示例

自己動手試一試 »

使用 inherits 值

在下面的示例中，我們將 inherits 值設定為 false。這意味著自定義屬性將不會從其父元素繼承值。請看結果。

示例

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

自己動手試一試 »

下一個示例將 inherits 值設定為 true。這意味著自定義屬性將從其父元素繼承值。請看結果。

示例

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

自己動手試一試 »

使用 @property 建立平滑動畫

使用 @property 規則，您可以實現一個全新的機會：動畫以前無法動畫的內容：漸變。請看下面的示例。

示例

為漸變指定兩個自定義屬性

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

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

自己動手試一試 »