如何实现带边框的渐变色文本？

Question

当前已知可以通过如下方式实现渐变色文字，如何给文字添加一个边框呢？

h1 {
  font-weight: 800;
  color: #24934a;
  background: linear-gradient(90deg, #30cf68 0%, #00a9df 100%);
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-background-clip: text;
  background-size: 100% 100%;
  -webkit-text-fill-color: transparent;
}

感谢回答中提供的方法，通过 -webkit-text-stroke: 0.5px white; 可以实现为文本添加 border 的效果，但 font-weight 失效了，有其他办法解决吗？

Answer 1

-webkit-text-stroke: 0.5px white;

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

可以用 -webkit-text-stroke 这个属性。

需要注意的是得添加 -webkit- 前缀，直接用 text-stroke 是不行的。不要看他需要有私有前缀，但是基本上所有浏览器都支持了。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

通过 -webkit-text-stroke: 0.5px white; 可以实现为文本添加 border 的效果，但 font-weight 失效了，可以尝试以下两个方法：

1、使用文本阴影代替边框
通过将 text-shadow 属性设置为多个阴影，可以创建文本边框的效果。这样可以保持文本的字重，并且可以轻松地控制边框的宽度和颜色。以下是一个示例：

h1 {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

2、使用 background-clip 属性创建填充效果
通过将 background-clip 属性设置为 text，可以创建填充效果，从而实现为文本添加边框的效果。这样可以保持文本的字重，并且可以轻松地控制边框的宽度和颜色。以下是一个示例：

h1 {
  font-size: 48px;
  font-weight: bold;
  color: white;
  background: linear-gradient(to right, #000, #000) no-repeat;
  background-size: 100% 0.5em;
  background-position: 0 90%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。