日本常用div彩虹块

<pre>

<div class="color-line"></div>

<style>

.color-line{
   
background:#f7f9fa;
   
height:6px;
   
background-image:-webkit-linear-gradient(left,#34495e,
#34495e25%,
#9b59b6 25%,#9b59b6
35%,#3498db
35%,#3498db
45%,#62cb31
45%,#62cb31
55%,#ffb606
55%,#ffb606
65%,#e67e22
65%,#e67e22
75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
   
background-image:-moz-linear-gradient(left,#34495e,
#34495e25%,
#9b59b6 25%,#9b59b6
35%,#3498db
35%,#3498db
45%,#62cb31
45%,#62cb31
55%,#ffb606
55%,#ffb606
65%,#e67e22
65%,#e67e22
75%,#e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
   
background-image:-ms-linear-gradient(left,#34495e,
#34495e25%,
#9b59b6 25%,#9b59b6
35%,#3498db
35%,#3498db
45%,#62cb31
45%,#62cb31
55%,#ffb606
55%,#ffb606
65%,#e67e22
65%,#e67e22
75%,#e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
   
background-image:linear-gradient(toright,
#34495e, #34495e25%,
#9b59b6 25%,#9b59b6
35%,#3498db
35%,#3498db
45%,#62cb31
45%,#62cb31
55%,#ffb606
55%,#ffb606
65%,#e67e22
65%,#e67e22
75%,#e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
   
background-size:100%
6px;
   
background-position:50%
100%;
   
background-repeat:no-repeat;
}

</style>

</pre>