0

別の色の線を作成するアイデアがあります

  1. 画像として使用します（ウェブサイト全体で使用する予定であり、http リクエストが増加するため、良くありません） ここに画像の説明を入力

  2. css で4 つまたは 5 つの classes( widht=50px,height=5px,color=somecolor) を定義し、それらのクラスを html で使用します。(20 以上のスパンを使用する必要があるかもしれません。DOM 要素の数を増やしたくありません)

css と html を使用して別の色の行を実行する他の方法を教えてもらえますか?

ありがとう

4

2 に答える 2

1

css3 を使用して実現できます。

このcssをdivに適用します

.multicolor
{
 height:5px;
 width:100%;
 background-image: -webkit-linear-gradient( left, red, orange, yellow, green, blue,indigo,violet, indigo, blue, green, yellow, orange, red );
 background-image: -moz-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -o-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -ms-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -khtml-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
}

JSfiddle デモ

于 2013-01-14T10:15:17.020 に答える