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>

列印頁面