CSS div具有不同的背景颜色,没有彩虹效果

Question

我想像这样创建一个css栏:

我知道的第一种方法是使用带有onw颜色的数字div.

第二种方法是使用一个div与`

background: -webkit-linear-gradient (left, red, orange, yellow, green, blue, indigo); 

这种方式实现了我想要的东西,然而颜色像彩虹一样淡入彼此,这就是我不想要的效果.

所以有没有办法实现一个不同颜色的css div,如所示的一个但没有彩虹效果？

干杯.

编辑:非常感谢每一个人,感谢您的时间和帮助.

Answer 1

请参阅以下CSS跨浏览器代码:

.bar {
  height: 10px;
  width: 350px;
  background: -webkit-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  background: red; /* For browsers that do not support gradients */
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* Standard syntax */
  background: linear-gradient(to right, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%); 
}

<div class="bar"></div>