在 CSS 中，`
@property` 是 **CSS Houdini（CSS 雕刻）** 的一部分，它允许你**显式地定义 CSS 自定义
属性（变量）的类型、语法和继承行为**，而不仅仅是使用 `--my-var` 这种无类型的方式。
---
## ✅ `
@property` 的作用
默认情况下，CSS 自定义
属性是“无类型”的，浏览器不会知道你传入的是颜色、长度还是数字，因此在做动画或过渡时不能很好地处理。
而 `
@property` 可以：
- **指定变量的类型**（如 `<length>`, `<color>`, `<number>` 等）
- 控制变量是否继承
- 定义初始值
这样你就可以在动画、过渡中安全地使用自定义
属性了！
---
## ✅ 语法
```css
@property --
property-name {
syntax: <type>;
inherits: true | false;
initial-value: <value>;
}
```
---
## ✅ 示例：定义一个颜色类型的自定义
属性
```css
@property --accent-color {
syntax: '<color>';
inherits: false;
initial-value: #000000;
}
```
然后你可以在样式中使用这个变量：
```css
.box {
background-color: var(--accent-color);
transition: background-color 0.3s ease;
}
```
点击按钮改变变量：
```html
<button onclick="changeColor()">Change Color</button>
<div class="box"></div>
```
```js
function changeColor() {
document.documentElement.style.set
Property('--accent-color', 'red');
}
```
---
## ✅ 示例：使用 `
@property` 实现平滑动画过渡
假设我们想让一个元素的 `--scale`
属性从 `1` 过渡到 `1.5`：
### ✅ 使用 `
@property` 定义：
```css
@property --scale {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
```
### ✅ 使用该变量：
```css
.box {
width: 100px;
height: 100px;
background: blue;
transform: scale(var(--scale));
transition: transform 0.5s ease;
}
```
### ✅ JS 控制变化：
```js
document.querySelector('.box').style.set
Property('--scale', '1.5');
```
这样就可以实现平滑的缩放动画了！
---
## ✅ 支持的 `syntax` 类型
| 类型 | 示例 |
|------|------|
| `<color>` | 红、蓝、#fff、hsl() 等 |
| `<length>` | px、em、rem、vw、vh 等 |
| `<percentage>` | % |
| `<number>` | 1, 2.5, -3 等 |
| `<angle>` | deg、rad、grad |
| `<time>` | s、ms |
| `<transform-function>` | translate(), scale(), rotate() 等 |
| `<custom-ident>` |
关键字如 auto、none、left 等 |
你也可以组合使用：
```css
syntax: '<length> <length>';
```
---
## ✅ 注意事项
| 注意点 | 说明 |
|--------|------|
| **兼容性** | 目前主流浏览器（Chrome、Edge、Safari）支持较好，Firefox 支持较晚 |
| **需要启用 Houdini** | 有些浏览器需要在设置中启用实验性功能 |
| **不要滥用** | 主要用于动画、过渡等需要类型检查的场景 |
---
## ✅ 浏览器兼容性（截至 2025）
| 浏览器 | 支持情况 |
|--------|----------|
| Chrome | ✅ |
| Edge | ✅ |
| Firefox | ⚠️（部分支持） |
| Safari | ✅ |
| Mobile | ✅（现代设备支持） |
你可以通过 [caniuse.com](https://caniuse.com/css-
property) 查看最新兼容性。
---
扫一扫
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
