CSS文本渐变和渐变轮廓

Question

我似乎找不到任何一个已经完成这个的人或事情。我正在尝试限制我们使用的图片数量，并希望创建一个带有渐变的文本作为其“颜色”，并在其周围创建一个渐变轮廓/描边。

到目前为止，我还没有看到有人将两者结合起来的东西。

我可以单独完成文本渐变和文本轮廓渐变。有没有办法将两者合并为一个？

h1 {
  text-transform: uppercase;
  font-size: 50px;
  font-weight: 800;
  color: rgb(255, 255, 255);
  background-image: linear-gradient(
    rgb(255, 255, 255) 46%,
    rgb(125, 142, 167) 49%,
    rgb(211, 226, 249) 80%
  );
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
}
h1::first-letter {
  font-size: 125%;
}

h2 {
  font-size: 50px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  background: -webkit-linear-gradient(
    -86deg,
    #eef85b 5%,
    #7aec8d 53%,
    #09e5c3 91%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
}
h2::first-letter {
  font-size: 125%;
}

https://codepen.io/deelite310/pen/OQxXrR

- Keoki

---

将您的元素加倍并将它们绝对定位，使描边的元素在另一个元素后面。 （这不能使用::after完成，因为您使用了::first-letter，而且它不是真正的动态效果，所以我不会将其发布为答案。） - Kaiido

Answer 1

我之前实现过一个技巧，使用"data-*"属性和伪元素before选择器，并将其z-index设置为-1。然后你可能需要根据自己的需求删除第一个字母的伪元素，可能是因为font-variant: small-caps。

注意：使用z-index=-1将图层向后移动，可能会被其他具有z-index的元素覆盖。

h1, h2, h3 {
  font-variant: small-caps;
  font-size: 50px;
  font-weight: 800;
  text-align: center;
  -webkit-background-clip: text;
}

h1, h3 {
  color: rgb(255, 255, 255);
  background-image: linear-gradient(
    rgb(255, 255, 255) 46%,
    rgb(125, 142, 167) 49%,
    rgb(211, 226, 249) 80%
  );
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
}

h2, h3::before {
  background: -webkit-linear-gradient(
    -86deg,
    #eef85b 5%,
    #7aec8d 53%,
    #09e5c3 91%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #232d2d;
}

h3::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
}

<h1>Character</h1>
<h2>Character</h2>
<h3 data-text="Character">Character</h3>

- Shawnnosaurus

Answer 2

我也很想看到这个... 然而，我所见过的唯一实现方式是使用svg文本。 这里有一些关于此的好信息....

SVG教程

- Simon

---

谢谢。我在一些问题上使用SVG，但当需要响应式文本时，它变成了一个问题。特别是在换行方面。在SVG中，您需要添加断行符，否则你的SVG /视口会相互冲突。 - Keoki