角丸でもゴーストボタンでも大丈夫！ボーダーにグラデーションをかける方法 #CSS

ボーダーにグラデーションをかけるには、
色々な実装方法がありますが、
角丸やゴーストボタンにするにはちょっとした注意が必要です。

今回は、角丸で背景を設定しないゴーストボタンにも対応した、
ボーダーにグラデーションをかける方法のまとめ。

◾️とりあえずボーダーにグラデーションをかけてみる

まず、ボーダーに直接グラデーションをかける事ができないので、
擬似要素を作って背景にグラデーションをかける事で、
グラデーションがかかったボーダーを作ります。

ズレていますね。
がんばって調節しても、ズレます。

border-imageは、名前の通り、
画像を使ってボーダーを描写する事が出来ます。

画像さえ用意すれば、
好きな形のボーダーをかける事が出来るので、
角丸の画像に差し替えます。

出来た！

これなら背景を設定しないボーストボタンでもOK！
グラデーションがかかった角丸ボーダーが実装出来ました。

この角丸とグラデーションを再現するためには、
ちょっとした注意が必要です。

特に注意したいのが、border-image-sliceとborder-image-repeat、
それからborderの幅も注意が必要です。

まずはborder-imageの設定方法をおさらい。

border-image-source: url(パス);

border-image-slice: 任意の数字;

border-image-repeat: 値;

まず注意したいのは、
角丸とグラデーションを表示するために、
ある程度大きめに画像をスライスする事。
*スライスというのは、border-image-sliceでスライスする範囲の事

さらに、border-image-repeatは
デフォルトの値が「stretch」になっているので、
そのままだと要素に合わせて画像が伸びてしまいます。

今回のようなグラデーション画像には、「round」を設定して、
繰り返し画像を表示、さらに範囲に収まるように画像を引き伸ばしてくれるようにします。
「repeat」は繰り返し画像を表示してくれますが、
borderよりも設定した画像が大きい場合には切れてしまうので注意！

borderの幅はborder-image-sliceで設定した値と比例した値を設定する事。
同じ値を設定すれば、画像と同じサイズのボーダーに。
Retina対応にするには、1/2サイズの幅をborderに設定してあげればOK！

以上の3つを注意すれば、
角丸でもゴーストボタンでも、ボーダーにグラデーションをかける事が出来ますね。

今回は、角丸で背景を設定しないゴーストボタンにも対応した、
ボーダーにグラデーションをかける方法をまとめました。

borderには直接グラデーションをかける事が出来ないので、
擬似要素で作ってみたものの、。

hover設定しようとしたら
linear-gradientはtransitionかけられないんだね（！）
等、色々とお勉強になりました。

おわり。