css : color和text-fill-color
本帖最后由 马黑黑 于 2022-9-24 09:59 编辑 <br /><br /><style>#mama { width: 100%; }
#mama > p { margin: 8px 0; }
</style>
<div id="mama">
<p>CSS中的 color 是一个众所周知的属性，用于设置前景色，即元素内的文本颜色。知道 text-fill-color 的人不会太多，它是CSS3的属性，其名称就能显示其作用，是设置文本填充颜色。color 和 text-fill-color 从效果上看，功能一致，试看：</p>
<p style="font: bold 2.4em sans-serif; color: olive;">COLOR</p>
<p style="font: bold 2.4em sans-serif; -webkit-text-fill-color: olive;">TEXT STROKE COLOR</p>
<p>上面两行文本的代码如下：</p>
<p><span style="white-space:pre"> </span><p style="font: bold 2.4em sans-serif; <font color="#8b0000">color: olive;</font>">COLOR</p></p>
<p><span style="white-space:pre"> </span><p style="font: bold 2.4em sans-serif; <font color="#8b0000">-webkit-text-fill-color: olive;</font>">STROKE FILL COLOR</p></p>
<p>text-fill-color尚处于实验阶段，所以需要前缀 <span style="color: rgb(139, 0, 0);">-webkit-</span>。效果上，二者的确没啥区别。不过，text-fill-color 属性权限优于 color 属性，如果同时设定了 color 和 text-fill-color，color 的设置无效。试看下面代码的效果：</p>
<p><span style="white-space:pre"> </span><p style="font: bold 2.4em sans-serif;<font color="#ff0000"> color: red</font>; <font color="#808000">-webkit-text-fill-color: olive;</font>">COLOR vs STROKE FILL COLOR</p></p>
<p style="font: bold 2.4em sans-serif; color: red; -webkit-text-fill-color: olive;">COLOR vs STROKE FILL COLOR</p>
<p>上面的文本颜色，我们用 color 设置为红色，又用 text-fill-color 设置为橄榄色，结果红色没有出现，text-fill-color 设置的橄榄色为文本最终渲染的颜色。你可以会说，这会不会是 color 属性放在前面被覆盖了，如果把 color 放在后面会怎么样？我们不妨来看看：</p>
< p><span style="white-space:pre"> </span><p style="font: bold 2.4em sans-serif; <font color="#808000">-webkit-text-fill-color: olive;</font> <font color="#ff0000">color: red;</font>">COLOR vs STROKE FILL COLOR</p><p></p>
<p style="font: bold 2.4em sans-serif; -webkit-text-fill-color: olive; color: red;">COLOR vs STROKE FILL COLOR</p>
<p>效果还是一样，color 的前景色设置还是被 text-fill-color 的填充色设置覆盖了。</p>
<p>当然，二者还是有区别的：color 纯粹设置文本颜色，是一个传统的CSS属性；text-fill-color 用于给文本进行颜色填充，通常会配合同样处于试验阶段的 text-stroke 使用（当然color也可以完美配合）；二者的优先权，text-fill-color 高于 color，二者共同存在时，color退居二线。</p>
</div> 还是 text-fill-color比较猛，太霸气了{:4_173:} 红影 发表于 2022-9-24 10:53
还是 text-fill-color比较猛，太霸气了
肯定是从svg那弄来的 马黑黑 发表于 2022-9-24 11:14
肯定是从svg那弄来的
忽然想起你的SVG歌词了，还能把文字那么玩，完全没想到呢。{:4_173:} 红影 发表于 2022-9-24 11:30
忽然想起你的SVG歌词了，还能把文字那么玩，完全没想到呢。
HTML一定要强大，不能老借用分支的成果 马黑黑 发表于 2022-9-24 11:47
HTML一定要强大，不能老借用分支的成果
分支能锦上添花，也挺不错。 红影 发表于 2022-9-24 13:02
分支能锦上添花，也挺不错。
HTML估计会有自己的特定发展方向
马黑黑 发表于 2022-9-24 13:36
HTML估计会有自己的特定发展方向
到现在还没想好么？ 红影 发表于 2022-9-24 13:43
到现在还没想好么？
很多东西要一步一步来。想这个 text-fill-color 吧，2013年就提出来了，到现在都还是实验性阶段。w3c提出的标准，需要浏览器去实现，谷歌维护的chromium内核支持的比较好，IE对此的支持也曾是很积极的。 马黑黑 发表于 2022-9-24 15:43
很多东西要一步一步来。想这个 text-fill-color 吧，2013年就提出来了，到现在都还是实验性阶段。w3c提出 ...
哦，原来还有这么多关联的东西呢，从来不知道{:4_173:} 红影 发表于 2022-9-24 19:32
哦，原来还有这么多关联的东西呢，从来不知道
没关系的 马黑黑 发表于 2022-9-24 20:12
没关系的
学习了{:4_204:} 红影 发表于 2022-9-24 20:30
学习了
{:4_190:}
页:
[1]