CSSでグラデーションのボーダーを実装する方法

  • 2019.03.03
  • WEB
CSSでグラデーションのボーダーを実装する方法

現在、CSSのborderプロパティでグラデーションは実現する方法はありません。
ですので、今回は擬似的にグラデーションのborderを表現していきます。

方法1

線形グラデーションの背景を持つラッパー要素を作成し、少し小さい内側の要素に背景を定義してくり抜くようにボーダーを実装します。

See the Pen border-gradation2 by piro (@pilog) on CodePen.0

方法2

擬似要素[:befor][:after]に高さ指定をして表現する方法。
こちらの方法では斜めのグラデーションは表現できません。

See the Pen qvWzvb by piro (@pilog) on CodePen.0

解説

linear-gradient()

・シンプルな例

/* グラデーションで、赤から始まり青で終わる */
.border-gradation {
  background: linear-gradient(red, blue);
}

/* 45度に傾いたグラデーションで、赤から始まり青で終わる */
.border-gradation {
  background: linear-gradient(45deg, red, blue);
}

/* グラデーションラインの60%から始まるグラデーション */
.border-gradation {
  background: linear-gradient(45deg, red, red 60%, blue);
}

linear-gradient()の詳細は以下を参照

https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

ベンダープレフィックスについて

  • -webkit- は、Chrome、Safari
  • -moz- は、Firefox
  • -ms- は、IE

古いIEに対応させる場合は以下の記述をします。

IE8、9は、-ms-filter: “progid:DXImageTransform.Microsoft.gradient…

※-ms-filterプロパティの値は従来のfilterと書式が異なり” “で括られる形になっていますので注意してください。

まとめ

現在、CSSのborderプロパティでグラデーションは実現する方法はありませんが、linear-gradient()を使うことで比較的簡単にレスポンシブ対応のグラデーションのボーダーを表現することができます。

モダンブラウザはじめ、IEなどのブラウザにも簡単に対応できますので是非、試してみてください

WEBカテゴリの最新記事