欢迎关注我的公众号:前端侦探今天来介绍一下Chrome 111+正式推出的 CSS颜色混合函数:color-mix()。所谓颜色混合,顾名思义,就是将两种颜色按照一定的比例混合起来,和调色板比较像。到目前为止,可以说是最强大、最实用的 CSS 颜色处理函数了,有了它,再也不需要用LESS、SASS等预处理工具了,还可以实现颜色动态更新,一起了解一下吧一、color-mix语法首先来看语法,比较简单color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);通用语法写作color-mix(method, color1[ p1], color2[ p2])主要由 3 部分组成,分别是插值颜色法(method,这里只介绍颜色空间)、基础颜色(color1)和混合颜色(color2),示意如下颜色空间是一个很复杂的概念,这里不做介绍,只需要知道用法就行。矩形颜色空间。srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65极性颜色空间 。hsl、hwb、lch、oklch以红色和白色混合为
...
继续阅读
(56)