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

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

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


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

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

<p data-height="265" data-theme-id="0" data-slug-hash="RypPxd" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css Gradation Button" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/RypPxd/">Css Gradation Button</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##◾️角丸にしてみる

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

<p data-height="265" data-theme-id="0" data-slug-hash="KRWdBe" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css Gradation Button" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/KRWdBe/">Css Gradation Button</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##◾️今度はborder-imageを使って実装してみる

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

<p data-height="265" data-theme-id="0" data-slug-hash="LmWpXV" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css Gradation Button" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/LmWpXV/">Css Gradation Button</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##◾️border-imageを使って角丸にする

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

<p data-height="265" data-theme-id="0" data-slug-hash="vjxNvX" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css Gradation Button" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/vjxNvX/">Css Gradation Button</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

出来た！

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

###◾️角丸グラデーションにするために注意したい事

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

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

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

####◾️border-imageの設定方法

#####border-image-sourceで画像のパスを設定
```
border-image-source: url(パス);
```

#####border-image-sliceでスライスする範囲を設定
```
border-image-slice: 任意の数字;
```

#####border-image-repeatで要素にどのように画像を設定するか定義する
```
border-image-repeat: 値;
```

その他、詳しい設定方法はこちらから
[https://developer.mozilla.org/ja/docs/Web/CSS/border-image](https://developer.mozilla.org/ja/docs/Web/CSS/border-image)

####◾️注意したい事その１

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

####◾️注意したい事その2

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

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

####◾️注意したい事その3

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

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

##◾️まとめ

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

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

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

<p data-height="265" data-theme-id="0" data-slug-hash="vjLEPy" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css Gradation Button" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/vjLEPy/">Css Gradation Button</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

おわり。