且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用渐变颜色构建的CSS彩虹

更新时间:2023-01-27 21:33:30

您可以在background属性中使用许多背景,因此可以使用许多gradients.这是一条使用多种渐变的丑陋彩虹:

You can use many backgrounds in the background property, and thus, many gradients. Here is an ugly rainbow using many gradients:

#grad1 {
  height: 200px;
  background: linear-gradient(78deg, red 5%, transparent 7%), linear-gradient(69deg, orange 10%, transparent 12%), linear-gradient(60deg, yellow 15%, transparent 17%), linear-gradient(51deg, green 20%, transparent 22%), linear-gradient(43deg, blue 25%, transparent 27%), linear-gradient(35deg, indigo 30%, transparent 32%), linear-gradient(28deg, violet 35%, transparent 37%);
}

<div id="grad1"></div>

这不是完美的,但这是一个开始...随便摆弄值,您将得到想要的东西.

It is not perfect, but it is a start... Fiddle around with the values and you will get what you want.