--- title: syntax slug: Web/CSS/@property/syntax tags: - CSS - Reference - Web - Property - Houdini ---
{{CSSRef}}{{SeeCompatTable}}

syntax CSS 描述符在使用{{cssxref("@property")}} {{cssxref("at-rule")}}时是必需的，它描述了该属性所允许的语法结构。

Syntax

如下是所有的有效syntax字符串:

syntax: '<color>'; /* 接收一个颜色值 */

syntax: '<length> | <percentage>'; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */

syntax: 'small | medium | large'; /* 接收这些参数值之一作为自定义标识符 */

syntax: '*'; /* 任何有效字符 */

取值

规范定义的、受语法支持的字符串。支持的语法是CSS types的子集。 这些可以单独使用，一些类型也可以结合使用。

"<length>"
任何有效的 {{cssxref("<length>")}} 值.
"<number>"
任何有效的 {{cssxref("<number>")}} 值.
"<percentage>"
任何有效的 {{cssxref("<percentage>")}} 值.
"<length-percentage>"
任何有效的 {{cssxref("<length-percentage>")}} 值.
"<color>"
任何有效的 {{cssxref("<color>")}} 值.
"<image>"
任何有效的 {{cssxref("<image>")}} 值.
"<url>"
任何有效的 {{cssxref("url()","url()")}} 值.
"<integer>"
任何有效的 {{cssxref("<integer>")}} 值.
"<angle>"
任何有效的 {{cssxref("<angle>")}} 值.
"<time>"
任何有效的 {{cssxref("<time>")}} 值.
"<resolution>"
任何有效的 {{cssxref("<resolution>")}} 值.
"<transform-function>"
任何有效的 {{cssxref("<transform-function>")}} 值.
"<custom-ident>"
任何有效的 {{cssxref("<custom-ident>")}} 值.
"<transform-list>"
A list of valid {{cssxref("<transform-function>")}} 值.

标准定义

{{cssinfo}}

标准语法

{{csssyntax}}

实例

为 --my-color {{cssxref('--*', '自定义属性')}}添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。

使用 CSS {{cssxref('@property')}} 规则:

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

使用 JavaScript中的 {{domxref('CSS.registerProperty')}}函数:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});

标准语法

{{csssyntax}}

规范

规范 状态 提案
{{SpecName('CSS Properties and 值 API', '#at-property-rule')}} {{Spec2('CSS Properties and 值 API')}} 初始定义.

浏览器兼容性

{{Compat("css.at-rules.property")}}

另见