Big Sur系统Safari 15无法为Bootstrap图标添加渐变问题咨询

以下是经过验证的可行解决方案：

• 方案一：将渐变属性同步作用到图标伪元素上（改动最小，无需修改HTML）
  修改你的CSS代码如下：

  .text-gradient {
      background: -webkit-linear-gradient(#2937f0, #9f1ae2);
      background: linear-gradient(#2937f0, #9f1ae2);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  /* 新增针对Bootstrap图标伪元素的匹配规则 */
  .text-gradient::before {
      background: inherit;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: inherit;
  }
  

  该方案同时兼容Chrome、Firefox、Edge以及Safari 15及以上版本。

• 方案二：补充伪元素display属性适配特殊场景
  如果方案一仍未生效，可补充伪元素的display规则适配部分异常渲染场景：

  .text-gradient::before {
      display: inline-block;
      background: inherit;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: inherit;
  }
  

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