CSS: hr 要素(水平線)をグラデーションにする
CSS で hr 要素をグラデーションにするには次のように指定します。
例)太さ 3px、左端が「white」で、右端が「gray」になるグラデーション。
hr {
height: 3px;
background: linear-gradient(to right, white, gray);
border: none;
}
この方法では、hr 要素をボックスとして考えます。
まず、高さ(hrの太さ)を height プロパティで指定し、 次に、背景色(グラデーション)を background プロパティ、linear-gradient() 関数で指定します。 最後に、ボーダーは必要ないので「border: none;」を指定します。
表示結果
このグラデーションの場合は linear-gradient() 関数の第一引数に「to right」を指定しています。 そのため左から右に向かってwhiteからgrayへのグラデーションとなります。
linear-gradient() 関数の使い方はこちらのページを参考にしてください。
参考記事:線形グラデーションを指定する liner-gradient()
サンプル
次のようなグラデーションも出来ます。
★ blue ⇒ red
background: linear-gradient(to right, blue, red);
★ blue ⇒ yellow ⇒ red
background: linear-gradient(to right, blue, yellow, red);