CSSだけで枠線グラデーション。

CSSだけで枠線をグラデーションにする方法のご紹介です。

枠線グラデーションってもはや画像やSVGで済ませちゃえばって思うけど、CSSでできるならそれに越したことはないじゃない。

じゃ〜やろう！

CSSで枠線をグラデーションにするって結構むずいじゃないと思うけど、あんまり使わないプロパティを使うから難しそうに見えるんだ。
そのプロパティがこれ

border-image

「border-image」は枠線にカラーやグラデーションを指定するプロパティ。
そんでもってこの「border-image」を使った枠線グラデーションのCSSがこちら！

.button {
  border: 4px solid;
  border-image: linear-gradient(to bottom, #f9fb8d, #8ebcfc) 1;
}

「border-image」プロパティの使い方

「border-image」で枠線グラデーションができるはわかったけど、値をいっぱい書くから使い方がわからないじゃない。
だから、これを🌲に覚えよう。

border-image: linear-gradient(to 方向, 初めの色, 終わりの色) 1;

「linear-gradient（）」はグラデーションにするよっていう値。
その中の「to 〜」が方向。「to right」なら左から右に、「to top」なら下から上に、「to bottom」なら上から下にグラデーションする。
真ん中の「初めの色」は「to 〜」の開始の色で、最後の「終わりの色」は「to 〜」の最後の色になります。
最後の「１」は雰囲気。これがないと上手くいかないんだ。

実際の枠線グラデーションを見てみよう

このCSSが下のです。参考にしてみてください。

.button {
  border: 20px solid;
  border-image: linear-gradient(to bottom, #f9fb8d, #8ebcfc) 1;
  padding: 40px 20px;
  line-height: .8;
  width: 100%;
  text-align: center;
}