css实现闪烁渐变背景，@property自定义属性

白桃与猫

已于 2024-08-23 09:54:18 修改

阅读量968

点赞数 3

分类专栏： css 文章标签： css 前端

于 2024-08-20 13:54:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52395343/article/details/141353464

版权

请添加图片描述

自 2024 年 7 月起，此功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中使用。

@property 是 CSS 中一个相对较新的功能，主要用于定义自定义属性（即 CSS 变量）的类型、继承性以及初始值。它允许开发者更好地控制和利用 CSS 自定义属性，尤其是在动画、过渡等动态场景中。

它也是Houdini API中的一种，Houdini 是一组底层 API，它们使开发人员可以直接访问 CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能。

1. @property语法

@property --property-name {
   
  syntax: "<data-type>";
  inherits: true | false;
  initial-value: value;
}

--property-name：自定义属性的名称，以 -- 开头。
syntax：定义该属性的值类型。可以使用 CSS 类型标识符，如 <color>、<length>、<number> 等，也可以使用更复杂的类型定义。
inherits：指定该属性是否会继承自父元素，true 表示会继承，false 表示不会继承。
initial-value：指定该属性的初始值。如果在使用时没有显式指定值，则会使用该初始值。

/* 定义自定义属性 --box-size 作为长度类型 */
@property --box-size {
   
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}

/* 使用自定义属性 */
.box{
   
  width: var(--box-size);
  height: var(--box-size)