为何background-clip: text在同浏览器中，自研页面无效但arc.dev页面生效？

导致这个问题的核心原因通常是以下两点：

1. 缺少文字透明设置 #

background-clip: text 生效的前提是文字本身为透明状态，这样渐变背景才能透过文字区域显示出来。原网站的代码大概率包含了文字透明的设置：

-webkit-text-fill-color: transparent;
text-fill-color: transparent;

如果你的独立页面未添加这行代码，文字会保留默认颜色（通常为黑色），直接覆盖渐变背景，同时浏览器会因属性使用场景不合法抛出无效值提示。

2. 浏览器前缀兼容性（针对旧版本浏览器） #

虽然现代浏览器已支持标准写法的 background-clip: text，但部分旧版浏览器（如旧版Chrome、Safari）需要带 -webkit- 前缀的属性才能识别：

-webkit-background-clip: text;
background-clip: text;

若你只复制了标准写法未加前缀，旧版浏览器会判定属性值无效，但原网站可能同时写了前缀版和标准版，因此能正常显示。

完整可运行示例 #

对比你自己的代码，参考以下完整代码片段：

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-text {
      font-size: 48px;
      font-weight: bold;
      background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <h1 class="gradient-text">渐变文字效果</h1>
</body>
</html>

内容的提问来源于stack exchange，提问作者Foobar