背景
在做项目时，总会遇到UI给出渐变色的卡片或者按钮，但在做高亮的时候，由于没有过渡，显得尤为生硬。
过去的解决方案
在过去，我们如果要实现渐变色的过渡，通常会使用如下几种方法：
- 添加遮罩层，通过改变遮罩层的透明度做出淡入淡出的效果，实现过渡。
- 通过
background-size/position使得渐变色移动，实现渐变色移动的效果。
- 通过
filter: hue-rotate滤镜实现色相旋转，实现过渡。
但这几种方式都有各自的局限性：
- 遮罩层的方式看似平滑，但不是真正的过渡，差点意思。
background-size/position的方式需要计算好background-size和background-position，否则会出现渐变不完整的情况。并且只是实现了渐变的移动，而不是过渡。filter: hue-rotate也需要计算好旋转角度，实现复杂度高，过渡的也不自然。
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container {
display: flex;
align-items: center;
}
div {
border-radius: 12px;
}
div + div {
margin-left: 8px;
}
.box1 {
position: relative;
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
overflow: hidden;
}
.box1::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, #36fd72, #5f1ae0);
opacity: 0;
transition: opacity .8s;
}
.box1:hover::before {
opacity: 1;
}
.box2 {
width: 300px;
height: 200px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #23b9f5);
background-size: 200% 100%;
transition: background-position .8s;
}
.box2:hover {
background-position: 100% 0;
}
.box3 {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
.box3::before {
content: '';
position: absolute;
inset: -50%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
transition: filter .8s;
}
.box3:hover::before {
filter: hue-rotate(320deg);
}
@property --color {
syntax: '<color>';
inherits: false;
initial-value: #000000;
}
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 94.57deg;
}
@property --start-color {
syntax: '<color>';
inherits: false;
initial-value: #e0f2ff;
}
@property --start-percentage {
syntax: '<percentage>';
inherits: false;
initial-value: 7.66%;
}
@property --end-color {
syntax: '<color>';
inherits: false;
initial-value: #b1deff;
}
@property --end-percentage {
syntax: '<percentage>';
inherits: false;
initial-value: 94.53%;
}
.box {
width: 300px;
height: 200px;
background: linear-gradient(
var(--angle),
var(--start-color) var(--start-percentage),
var(--end-color) var(--end-percentage)
);
border-radius: 12px;
transition: --angle .8s, --start-color .8s, --start-percentage .8s, --end-color .8s, --end-percentage .8s;
}
.box:hover {
--angle: 143.85deg;
--start-color: #ffc510;
--start-percentage: 14.66%;
--end-color: #f44433;
--end-percentage: 85.95%;
}
我们再看看@property规则中这些属性的含义。
Syntax语法描述符
Syntax用于描述自定义属性的数据类型，必填项，常见值包括：
<number> 数字（如0，1，2.5）<percentage> 百分比（如0%，50%，100%）<length> 长度单位（如px，em，rem）<color> 颜色值<angle> 角度值（如deg，rad）<time> 时间值（如s，ms）<image> 图片<*> 任意类型
Inherits继承描述符
Inherits用于描述自定义属性是否从父元素继承值，必填项：
true 从父元素继承值false 不继承，每个元素独立
Initial-value初始值描述符
Initial-value用于描述自定义属性的初始值，在Syntax为通用时为可选。
兼容性
@property目前仍是实验性规则，但主流浏览器较新版本都已支持。
发表于 2026-4-24 10:55:00
