将分级的css颜色分成条形？

Question

我想采用渐变色的风格并将其制作成条形。所以每个酒吧都是纯色，从顶部的红色，然后是橙色，然后是橙色，然后是橙色，然后是橙色，然后是橙色，但有点黄色等。

有没有人认为这是一个css技巧？

我的代码是：

#grad {
        background: red; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
        background: linear-gradient(red, yellow); /* Standard syntax */
    }

Answer 1

这样的事可能吗？

.gradients {
background: orange;
background: -webkit-gradient(linear,  left top,  left bottom, 
    color-stop(0%, rgba(255, 0, 0, 1)), 
    color-stop(20%, rgba(255, 255, 0, 1)),
    color-stop(40%, rgba(0, 255, 0, 1)),
    color-stop(60%, rgba(0, 0, 255, 1)),
    color-stop(80%, rgba(255, 0, 255, 1)),
    color-stop(100%, rgba(255, 0, 0, 1)));

}

Answer 2

你想要这样的东西吗？

div {
  width: 400px;
  height: 400px;
  background: repeating-linear-gradient(to right, transparent 0%, transparent 30%, white 30%, white 80%, transparent 80%, transparent 100%), linear-gradient(to right, red 0%, yellow 100%);
  background-size: 10px 100%, 100% 100%;
} 

<强> Working Fiddle

Answer 3

您可以使用linear-gradient和include <stdio.h> int main() { int array[100], n, c, d, swap; printf("Enter number of elements\n"); scanf("%d", &n); printf("Enter %d integers\n", n); for (c = 0; c < n; c++) scanf("%d", &array[c]); for (c = 0; c < (n - 1); c++) { for (d = 0; d < n - c - 1; d++) { if (array[d] > array[d + 1]) /* For decreasing order use < */ { swap = array[d]; array[d] = array[d + 1]; array[d + 1] = swap; } } } printf("Sorted list in ascending order:\n"); for (c = 0; c < n; c++) printf("%d\n", array[c]); return 0;

执行此类操作

border

body, html {
  margin: 0;
  padding: 0;
}

#grad {
  min-height: 100vh;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #81EDDD 14.3%, #94DFC1 14.3%, #94DFC1 28.6%, #ABD2A3 28.6%, #ABD2A3 42.9%, #C0C38A 42.9%, #C0C38A 57.2%, #D3B56C 57.2%, #D3B56C 71.5%, #EAA750 71.5%, #EAA750 85.8%, #FF9934 85.8%);
}

p {
  padding: 0 50px;
  max-width: 250px;
}

Answer 4

这真的只是玩色彩......

HTML：

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

的CSS：

div { height: 20px; margin: 0 0 10px 0; }

.a { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,0,0) 100%);
}
.b { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,100,0) 100%);
}
.c { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(200,150,0) 50%);
}
.d { 
background: linear-gradient(to bottom, rgb(255,60,0) 0%, rgb(250,200,0) 90%);
}
.e { 
background: linear-gradient(to bottom, rgb(255,150,0) 0%, rgb(250,250,0) 90%);
}
.f { 
background: linear-gradient(to bottom, rgb(255,200,0) 0%, rgb(250,250,0) 90%);
}

<强> fiddle

答案清楚地表明，有几种方法可以做到。