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>

打印页面