去的解决方案在过去我们如果要实现渐变色的过渡通常会使用以下几种方法:添加挡拆层通过改变挡拆层的透明度做出来淡淡的失败实现过渡。通过background-size/position使用渐变色移动实现渐变色移动的失败。通过filter: hue-rotate滤镜实现色相回旋实现过渡。但是这几种方式都有各自的局限性:遮拦层的方式看似平滑但不是真正的过渡十字路口意思。background-size/position的方式需求计算好background-size和background-position否决会出现渐变色不完全的情况。 而且只是实现了逐渐改变的移动而不是过渡。filter: hue-rotate也需求计算好转弯角度实现回升度高过渡性也不自然。12345divclasscontainerdivclassbox1/divdivclassbox2/divdivclassbox3/div/div1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859.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新规则property规则可以定义一个自定义属性并且可以指定该属性的语法是否继承初始方等。12345property --color {syntax:color;inherits:false;initial-value: #000000;}我们只是需求把握自定义属性--color应用到linear-gradient中在特定的时候改变它的侧面非常农松就可以实现渐变色的过渡了。1divclassbox/div1234567891011121314151617181920212223242526272829303132333435363738394041424344property --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数字(如012.5 )percentage百分比(如0%、50%、100% )length长度单位(如pxemrem )color脸色侧angle角度侧(如degrad )time时间侧(如sms )image图片*任意类型Inherits继承描述符Inherits用于描述自定义属性是否为从父元素继承侧必填项:true从父元素继承方false不继承每个元素独立初始值初始侧描述符Initial-value用描述自定义属性的初始侧在Syntax为通用时为可选择。兼容性property目前是宸验性规则但主流浏览车比较新版本都已支持。总结果展望property有规律的出现标志着CSS在动态荣式控制方面迈出了重要的一步。 它解决了渐变色过渡性的技术难