带有渐变和渐变轮廓的 CSS 文本答案

【问题标题】：CSS Text with Gradient and Gradient Outline带有渐变和渐变轮廓的 CSS 文本
【发布时间】：2018-07-25 11:53:57
【问题描述】：

我似乎找不到任何这样做的人或任何人。我正在尝试限制我们使用的图像数量，并希望创建一个以渐变为“颜色”的文本，并在其周围有一个渐变轮廓/描边

到目前为止，我还没有看到任何将两者结合在一起的东西。

我可以自己完成文本渐变，以及自己完成文本轮廓渐变。有没有办法合二为一？

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

【问题讨论】：

将你的元素加倍，并将它们绝对放置在另一个元素后面。（这不能用::after 完成，因为你确实使用了::first-letter，而且它不是真正动态的，所以我不会将它作为答案发布。

标签： css linear-gradients

【解决方案1】：

我也很想看到这个... 但是，我看到完成此操作的唯一方法是使用 svg 文本。这里有一些很好的信息......

SVG Tutorials

【讨论】：

感谢我在一些问题上使用 SVG，但是当我需要响应式文本时它就成了一个问题。尤其是在自动换行方面。 SVG 你需要插入你的换行符，否则你的 sVG/viewport 会互相冲突

【解决方案2】：

我之前实现了一个技巧，使用“data-*”属性和 z-index 为 -1 的伪 before 选择器。然后你需要根据你的需要删除font-variant: small-caps 的第一个字母pseudo。

注意：使用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>

【讨论】：