首页
/ CanIUse项目:Chromium现已支持HTML文本的paint-order属性

CanIUse项目:Chromium现已支持HTML文本的paint-order属性

2025-06-06 00:58:15作者:农烁颖Land

Chromium浏览器在最新版本中实现了对HTML文本的paint-order CSS属性的完整支持,这一进展解决了长期以来该属性仅适用于SVG文本而不适用于HTML文本的限制。

paint-order属性是一个强大的CSS特性,它允许开发者控制文本或图形元素的绘制顺序,特别是对于带有描边(stroke)效果的文本显示尤为重要。该属性可以指定三个绘制步骤的顺序:fill(填充)、stroke(描边)和markers(标记),默认顺序为fill → stroke → markers。

在Chromium 123版本之前,paint-order属性虽然可以在SVG文本上正常工作,但对HTML文本无效。这意味着开发者无法自由控制HTML文本的描边和填充的绘制顺序,导致某些视觉效果难以实现。例如,当需要让文本描边显示在填充之上时,开发者不得不寻找替代方案。

现在,随着Chromium 123版本的发布,这一限制已被移除。开发者可以像下面这样使用paint-order属性来控制HTML文本的绘制顺序:

.text-with-stroke {
  -webkit-text-stroke: 4px black; /* 文本描边 */
  paint-order: stroke fill; /* 先绘制描边,再绘制填充 */
  color: white; /* 文本填充色 */
}

这一改进使得网页开发者能够更灵活地控制文本的视觉效果,特别是在需要创建醒目标题或特殊文字效果时。例如,现在可以轻松实现描边覆盖在填充文字之上的效果,这在游戏UI、标题设计等场景中非常有用。

验证这一功能是否生效的方法很简单:在支持该功能的浏览器中,设置paint-order为"stroke fill"将使描边显示在填充之下,而默认情况下描边会覆盖在填充之上。开发者可以通过简单的对比测试来确认浏览器是否已支持这一特性。

这一变化标志着CSS规范在浏览器实现上又向前迈进了一步,为网页设计师和开发者提供了更多创造性的可能性。随着浏览器对现代CSS特性的支持不断完善,网页的视觉表现力也将得到进一步提升。

登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
22
6
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
166
2.05 K
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
8
0
openHiTLS-examplesopenHiTLS-examples
本仓将为广大高校开发者提供开源实践和创新开发平台,收集和展示openHiTLS示例代码及创新应用,欢迎大家投稿,让全世界看到您的精巧密码实现设计,也让更多人通过您的优秀成果,理解、喜爱上密码技术。
C
85
563
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
60
17
apintoapinto
基于golang开发的网关。具有各种插件,可以自行扩展,即插即用。此外,它可以快速帮助企业管理API服务,提高API服务的稳定性和安全性。
Go
22
0
cjoycjoy
一个高性能、可扩展、轻量、省心的仓颉应用开发框架。IoC,Rest,宏路由,Json,中间件,参数绑定与校验,文件上传下载,OAuth2,MCP......
Cangjie
94
15
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
199
279
giteagitea
喝着茶写代码!最易用的自托管一站式代码托管平台,包含Git托管,代码审查,团队协作,软件包和CI/CD。
Go
17
0
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
954
564