news 2026/7/2 3:14:33

CSS终于支持渐变色的过渡了

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
CSS终于支持渐变色的过渡了

去的解决方案

在过去，我们如果要实现渐变色的过渡，通常会使用以下几种方法:

  1. 添加挡拆层，通过改变挡拆层的透明度做出来淡淡的失败，实现过渡。
  2. 通过background-size/position使用渐变色移动，实现渐变色移动的失败。
  3. 通过filter: hue-rotate滤镜实现色相回旋，实现过渡。

但是这几种方式都有各自的局限性:

  1. 遮拦层的方式看似平滑，但不是真正的过渡，十字路口意思。
  2. background-size/position的方式需求计算好background-size和background-position，否决会出现渐变色不完全的情况。 而且只是实现了逐渐改变的移动，而不是过渡。
  3. filter: hue-rotate也需求计算好转弯角度，实现回升度高，过渡性也不自然。

1

2

3

4

5

<divclass="container">

<divclass="box1"></div>

<divclass="box2"></div>

<divclass="box3"></div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

.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规则可以定义一个自定义属性，并且可以指定该属性的语法，是否继承，初始方等。

1

2

3

4

5

@property --color {

syntax:'<color>';

inherits:false;

initial-value: #000000;

}

我们只是需求把握自定义属性--color应用到linear-gradient中，在特定的时候改变它的侧面，非常农松就可以实现渐变色的过渡了。

1

<divclass="box"></div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

@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用描述自定义属性的初始侧，在Syntax为通用时为可选择。

兼容性

@property目前是宸验性规则，但主流浏览车比较新版本都已支持。

总结果展望

@property有规律的出现，标志着CSS在动态荣式控制方面迈出了重要的一步。 它解决了渐变色过渡性的技术难

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/2 3:13:01

Element Plus 与 AI 融合演进：Vue 中后台组件库的智能化转型研究

执行摘要 Element Plus 作为饿了么前端团队维护的 Vue 3 企业级组件库&#xff0c;在国内中后台开发领域占据主导地位。截至 2026 年初&#xff0c;其在 GitHub 已获得超过 2.5 万 Star&#xff0c;npm 周下载量达数十万次&#xff0c;是 Vue 3 项目开发的首选 UI 方案之一。 随…

作者头像 李华
网站建设 2026/7/2 3:03:26

3分钟解锁GitHub数学公式：让技术文档告别公式乱码

3分钟解锁GitHub数学公式&#xff1a;让技术文档告别公式乱码 【免费下载链接】github-mathjax 项目地址: https://gitcode.com/gh_mirrors/gi/github-mathjax 还在为GitHub上那些无法显示的数学公式而烦恼吗&#xff1f;想象一下&#xff0c;你正在阅读一篇关于机器学…

作者头像 李华
网站建设 2026/7/2 3:00:02

变身超人程序员

事情大概是这个样子的。有需求部门反应&#xff0c;我们部门负责的某个项目的页面上数据显示有问题。有10条数据&#xff0c;每页显示4条&#xff0c;那么正常情况下第1页应该显示4条&#xff0c;第2页4条&#xff0c;第3页2条。因为某一处代码抽风&#xff0c;现在数据被显示成…

作者头像 李华