CSS @property - initial-value

CSS 描述符initial-value 在@property 規則中是必需的，除非語法允許任何有效的標記流。它定義了屬性的初始值。

所選的初始值必須正確地遵循語法定義。例如，如果語法是<length>，則初始值必須是有效的長度值。

可能的值

<declaration-value> - 包含與所選語法相對應值的字串。

語法

initial-value = <declaration-value>

CSS initial-value - 字串值

以下程式碼是initial-value 描述符的示例

在此示例中，@property 中的initial-value 描述符將自定義屬性--box-size 的初始值設定為150px。
這意味著，如果未顯式定義自定義屬性，則預設情況下將其設定為150px，以確保在未指定特定值的情況下使用該屬性時的一致性。

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

列印頁面