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;
}

自己动手试一试 »