日本常用div彩虹块

<pre>

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

<style>

.color-line{

   background:#f7f9fa;

   height:6px;

   background-image:-webkit-linear-gradient(left,#34495e,#34495e25%,#9b59b6 25%,#9b59b635%,#3498db35%,#3498db45%,#62cb3145%,#62cb3155%,#ffb60655%,#ffb60665%,#e67e2265%,#e67e2275%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);

   background-image:-moz-linear-gradient(left,#34495e,#34495e25%,#9b59b6 25%,#9b59b635%,#3498db35%,#3498db45%,#62cb3145%,#62cb3155%,#ffb60655%,#ffb60665%,#e67e2265%,#e67e2275%,#e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);

   background-image:-ms-linear-gradient(left,#34495e,#34495e25%,#9b59b6 25%,#9b59b635%,#3498db35%,#3498db45%,#62cb3145%,#62cb3155%,#ffb60655%,#ffb60665%,#e67e2265%,#e67e2275%,#e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);

   background-image:linear-gradient(toright,#34495e, #34495e25%,#9b59b6 25%,#9b59b635%,#3498db35%,#3498db45%,#62cb3145%,#62cb3155%,#ffb60655%,#ffb60665%,#e67e2265%,#e67e2275%,#e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);

   background-size:100%6px;

   background-position:50%100%;

   background-repeat:no-repeat;

}

</style>

</pre>