CSS @property - 语法

@property 规则规定使用 CSS 描述符 syntax，它指定了为定义的属性允许的语法。

可能的值

描述符 syntax 接受与指南中指定的语法匹配的字符串。支持的语法表示可以使用单独或以各种组合使用的 CSS 类型的子集。

<length> - 任何有效的 <length> 值。
<number> - 任何有效的 <number> 值。
<percentage> - 任何有效的 <percentage> 值。
<length-percentage> - 任何有效的 <length-percentage> 值。
<color> - 任何有效的 <color> 值。
<url> - 任何有效的 <url> 值。
<integer> - 任何有效的 <integer> 值。
<angle> - 任何有效的 <angle> 值。
<time> - 任何有效的 <time> 值。
<resolution> - 任何有效的 <resolution> 值。
<transform-function> - 任何有效的 <transform-function> 值。
<custom-ident> - 任何有效的 <custom-ident> 值。
<transform-list> - 任何有效的 <transform-list> 值。

语法

syntax = <string>

CSS 语法 - 长度值

以下代码演示了 syntax 描述符的使用

此示例使用 CSS @property at-rule 定义一个名为 --box-size 的自定义属性，该属性接受与 <length> 语法匹配的值。
<length> 语法代表 CSS 中的各种长度值，例如像素、em 单位、百分比等。
.box 类使用此自定义属性来设置宽度和高度，这允许根据指定的值动态调整大小。

<html>
<head>
<style>
   @property --box-size {
      syntax: '<length>';
      inherits: false;
      initial-value: 0;
   }
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      margin: 30px;
   }
   .box {
      --box-size: 100px;
      width: var(--box-size);
      height: var(--box-size);
      background-color: lightblue;
      border: 2px solid black;
   }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

打印页面