css : color和text-fill-color

马黑黑 · 发表于 2022-9-24 09:58

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-9-24 09:59 编辑

CSS中的 color 是一个众所周知的属性，用于设置前景色，即元素内的文本颜色。知道 text-fill-color 的人不会太多，它是CSS3的属性，其名称就能显示其作用，是设置文本填充颜色。color 和 text-fill-color 从效果上看，功能一致，试看：

COLOR

TEXT STROKE COLOR

上面两行文本的代码如下：

COLOR

STROKE FILL COLOR

text-fill-color尚处于实验阶段，所以需要前缀 -webkit-。效果上，二者的确没啥区别。不过，text-fill-color 属性权限优于 color 属性，如果同时设定了 color 和 text-fill-color，color 的设置无效。试看下面代码的效果：

COLOR vs STROKE FILL COLOR

COLOR vs STROKE FILL COLOR

上面的文本颜色，我们用 color 设置为红色，又用 text-fill-color 设置为橄榄色，结果红色没有出现，text-fill-color 设置的橄榄色为文本最终渲染的颜色。你可以会说，这会不会是 color 属性放在前面被覆盖了，如果把 color 放在后面会怎么样？我们不妨来看看：

COLOR vs STROKE FILL COLOR

COLOR vs STROKE FILL COLOR

效果还是一样，color 的前景色设置还是被 text-fill-color 的填充色设置覆盖了。

当然，二者还是有区别的：color 纯粹设置文本颜色，是一个传统的CSS属性；text-fill-color 用于给文本进行颜色填充，通常会配合同样处于试验阶段的 text-stroke 使用（当然color也可以完美配合）；二者的优先权，text-fill-color 高于 color，二者共同存在时，color退居二线。