2023年你应该需要知道的CSS新特性-颜色篇

Hi~，我是 一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~

🍎 写在前面

前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。

这篇文章将介绍如下内容：

• CSSaccent-color属性
• CSS中的变量：currentColor
• CSScolor-mix()函数

🍓 accent-color属性

CSS中的accent-color属性简单的说就是用来修改HTML中表单控件的颜色，目前支持的控件如下：

• 单选框
• 多选框
• 范围选择框
• 进度条

该属性还具有继承性，也就是说为父级设置该属性子元素中的控件可以统一颜色。

这个属性的例子如下：

代码片段

上面这个例子的作者是张鑫旭大佬

该属性的浏览器兼容性如下：

🍔 currentColor

currentColor是CSS中的第一个变量，这个值没有一个固定的颜色，它的颜色是当前元素的字体颜色；

示例代码如下所示：

代码片段

在上面这个例子中，我们实现了根据字体颜色来动态变化背景颜色和阴影颜色的功能。

它的浏览器兼容性如下：

这可不是一个新的特性，只不过被人们遗忘了，就连IE都支持这个属性。

🥝 color-mix()函数

CSS中提供的color-mix()函数可以根据指定的算法返回两个颜色混合到一起的颜色值，它的语法如下：

• 颜色空间指的是HSL；

  可用的颜色空间有：srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65、hsl、hwb、lch、oklch。

• 基色将指red;
• Base Percent指的是50%;
• 混合颜色指的是white；

这个函数目前没有浏览器兼容它，如下图：

🍍 写在最后

如果对本篇文章对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~