ボーダーにグラデーション
ボーダーにグラデーション

CSSだけで border-bottom にグラデーションをかけてみよう!

CSSだけで、border-bottom プロパティにグラデーションをかける方法のサンプルを作ってみました。カラーはグラデーションが分かりやすい様に適当につけているので、自由に変更してみてください。Firefoxでは問題なく表示され、IE11も一応表示されています。

border-bottomのグラデーションサンプル

今回、CSSで出来るボーダーグラデーションのサンプルです。

ボーダーボトムグラデーションサンプル

HTMLのサンプル

<h2 class="border-gradation">サンプル見出し</h2>

CSSサンプル

.border-gradation {
    border-bottom: 6px solid;
    border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
    border-image-slice: 1;
}

上記のサンプルは、border-bottom のグラデーション部分のみを記載しています。フォントサイズなどは、自由に設定してみてください。


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利!