文字渐变色的设置以及在 iOS/Safari 的兼容性问题

文字渐变色如何设置

<div class="text-gradient-wrap">
  <span class='gradient'>设置文字渐变</span>
  <span class='gradient'>这是第二行</span>
</div>

.text-gradient-wrap {
  display: flex;
  flex-direction: column;
}

/* 设置文字渐变色 */
.gradient {
    background-image: linear-gradient(180deg, #ffffff 0%, rgb(224, 152, 152) 100%); /* 以背景的方式来设置渐变 */
    background-clip: text; /* 表示需要裁切的是文字部分 */
    -webkit-text-fill-color: transparent; /* 需要给文字的填充颜色设置为透明 */
}

以上三行代码，便是设置文字渐变色的方法，在谷歌浏览器或较新版本的手机端查看是没问题的，代码写到这里就可以了。

如果还要考虑低版本的兼容性问题，可以继续往下看～

低版本 iOS / Safari 兼容性问题

在 iOS 的部分手机上可以很明显的看到，设置过渐变色的文字，它的周围都会有很细的线；

safari 浏览器版本 15.2 (17612.3.6.1.6) 刚好可以验证（尝试缩放浏览器，会看的更明显），高版本暂时无法复现这个问题。

解决方法

1. 使用 css 样式

.text-gradient-wrap {
  display: flex;
  flex-direction: column;
  background-color: rgba(0,0,0,0.7); /* 使用深色背景，看的更加明显一些 */
}

/* 设置文字渐变色 */
.gradient {
    background-image: linear-gradient(180deg, #ffffff 0%, #e09898 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 增加以下两行代码 */
    padding: 1px; /* 设置 1px 的内边距  */
    clip-path: inset(1px); /* 以矩形方式，裁切掉四周的 1px 宽度 */
}

2. 使用 svg

感兴趣的同学可以参考 svg-text-element 官网查看具体属性及使用方法

<div class="text-gradient-wrap">
  {["设置文字渐变", "这是第二行"].map((text, index) => (
    <svg key={index}>
     <!-- 设置渐变色，需要包在 defs 里 -->
     <!-- 定义id，为 text 标签的 fill 属性使用 -->
     <!-- y1=0% y2=100% :渐变旋转角度 180deg -->
     <!-- offset: 渐变颜色点所在的位置 -->
     <!-- stopColor: 渐变的颜色 -->
      <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="100%" stop-color="#e09898" />
        </linearGradient>
      </defs>

      <!-- 设置文字 -->
      <!-- x: 文字x轴坐标，y: 文字基线y轴坐标 -->
      <!-- fill: 填充 与 linearGradient 中的 id 相对应 -->
      <text
        x="50%"
        y="50%"
        fill="url(#gradient)"
      >
        {text}
      </text>
    </svg>
  ))}
</div>

关于 clip-path

再额外分享一个有意思的网站～ techbrood.com/tool?p=css-…

这里可以随意的对图形进行裁剪，并查看代码效果

参考文章

stackoverflow.com/questions/7…

---

如果更好的方案，欢迎各位大佬指教啦~