有人能想出更好的方法来创建 rainbow-text-gradient 吗？

Question

正在尝试向网站添加 cool-looking rainbow-heading 东西。我正在使用 position: absolute 强制所有标题重叠，稍微交错，以产生......你可以自己看看。

我想知道是否有更好的方法使用 CSS 定位来完成此操作，或者这是它所能达到的最好的方法。

body {
  background-color: black;
}

.red { color: red; }
.orange { color: orange; top: 1px; left: 2px; }
.yellow { color: yellow; top: 2px; left: 4px; }
.green { color: green; top: 3px; left: 6px; }
.blue { color: blue; top: 4px; left: 8px; }

.container { 
  position: relative;
}

h1 {
  position: absolute;
}

<div class="container">
  <h1 class="red">
  Hello
    <h1 class="orange">
    Hello
      <h1 class="yellow">
      Hello
        <h1 class="green">
        Hello
          <h1 class="blue">
          Hello
          </h1>
        </h1>
      </h1>
    </h1>
  </h1>
</div>

Answer 1

你考虑过CSS text shadow吗？

.rainbow {
  padding: 16px;
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 32px;
  text-shadow:
    -3px -3px 2px red,
    -6px -6px 2px orange,
    -9px -9px 2px yellow;
    /* etc */
}

<div class="rainbow">Hello</div>

有人能想出更好的方法来创建 rainbow-text-gradient 吗？

Can anybody think of a better way to create a rainbow-text-gradient?

css

gradient