text-fill-color是webkit私有属性，非标准，需配合color:transparent和-webkit-background-clip:text才能实现镂空/渐变文字效果；firefox不支持，且对display类型和父容器overflow有严格要求。
text-fill-color 不是标准 CSS 属性，它只是 WebKit 内核浏览器（Chrome、Safari、Edge）支持的私有属性，且必须配合 color: transparent 才能生效；单独写 -webkit-text-fill-color: red 而不设 color: transparent，文字仍会按默认颜色显示——这是最常被忽略的前提。
为什么 color: transparent 不能省？
文字填充效果的本质是“让文字区域变成透明窗口，露出背后的背景”。-webkit-text-fill-color 只控制文字“颜料层”的颜色，但它不会覆盖 color 的优先级。如果 color 是非透明值（比如 color: black），它就会盖住 -webkit-text-fill-color 的设置。
-
color: transparent是打开“窗口”的必要条件，缺它整个效果就失效 -
-webkit-text-fill-color: transparent是冗余写法，可省略（除非你明确想在旧版 Safari 中兜底） - Firefox 完全不支持
-webkit-text-fill-color，所以它只影响 WebKit 浏览器的渲染行为
background-clip: text 和 -webkit-background-clip: text 必须成对出现
仅靠 background-clip: text 在 Chrome/Safari 中不会生效，必须加 -webkit-background-clip: text 前缀。这个前缀不是“可选优化”，而是当前事实上的强制要求。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 漏掉
-webkit-background-clip: text→ 文字背景图/渐变直接铺满整个容器，不贴合文字轮廓 该属性对 - 若用在
<button></button>或<input>上，部分浏览器会忽略该样式，建议改用<div> 或 <code><p></p>包裹常见失效场景与快速排查点
写完代码却看不到镂空效果？大概率卡在这几个地方：
-
background-image路径错误或图片 404（检查 DevTools Network 面板） - 父容器设置了
overflow: hidden，且文字高度超出容器范围（background-clip: text需要完整渲染区域） - 同时用了
text-shadow—— 它会干扰透明区域的合成，导致背景无法穿透，应禁用或改用filter: drop-shadow() - CSS 变量用于
background-image，如url(var(--img))，某些浏览器版本不支持运行时解析
真正起作用的是三件套：
color: transparent+-webkit-background-clip: text+background-clip: text。少一个，文字就只是普通文字；多一个text-shadow或overflow: hidden，就可能完全看不见效果。兼容性不是“能不能用”，而是“在哪种组合下才稳”。 -
display 有隐含要求：元素需为 block 或 inline-block，inline 元素（如默认 <span></span>）可能裁剪异常
