borderをグラデーションにする方法

See the Pen border-image-gradient by Takashi Abe (@TakeshiAbe) on CodePen.

今回は、このようなグラデーションになったborderの作り方です。
グラデーションといえばgradient。線形のグラデーションをつくるプロパティといえば、linear-gradient、repeating-linear-gradinet。

グラデーションですし感覚的には”color”にまつわるプロパティなのですが、cssでは「image」として扱われます。

borderがグラデーションになっているのは、borderプロパティで色指定するのではなく、border-image-sourceにlinear-gradientを当てているからです。

というわけで今回の主題は「border-image」です。linear-gradientまでやってしまうと長くなるので詳しくはlinear-gradientへどうぞ。

border-imageプロパティ

好きな画像をborderとして使えるborder-image。最近あまり見なくなりましたが、以前はそこそこ使われていたような気がします。

border-imageプロパティはショートハンド型であり、１つずつ指定するには

を使用します。指定なければ初期値が適用されます。

なお重要なことですが、border-imageプロパティを使うときも「border」プロパティの指定をしないといけません。
無いと表示されない場合もありますし、万一border-imageが読み込まれなかったときに代替表示されます。

では個別に説明していきますが、-source については特に説明いらないだろうと思うので省きます。

border-image-width

border-imageの表示幅です。指定がない場合は、borderに指定された幅が適用されます。
どちらの指定もない場合は表示されません。

値を空白区切りで２つ指定すると上下・左右、　３つ指定すると上・左右・下、　４つ指定すると上・右・下・左の辺をそれぞれ指定できます。

border-image-outset

要素とborderの位置関係を定義します。

初期値は「0」で、border-imageが要素の内側ピッタリになるよう配置されます。

borderで指定した幅、（borderが無い場合はborder-image-widthで指定した幅）を1として、数字が大きくなるほど要素の外側に広がります。（たとえばborder-image-outset:1; なら、要素の外側ピッタリになる）

「１」「1.2」などの数値のほか、px・em・remなどの指定も可。
０以下の指定をするとエラー。

ここまでは特に問題ないと思います。
では、ここまでのプロパティだけを指定してborder-imageを設定してみるとどうなるか、

↑(縦横100pxの画像）を使うパターンと、linear-gradientを使ったパターンの２種類やってみます。

.sample共通{
  background: #fff ;
  border-image-width:　10px ;
  border-image-outset: 1 ;    /* ( = 10px ) */
}

.sample1{
  border-image-source: url(sample.png) ;
}

.sample2{
  border-image-source: linear-gradient(navy,tomato) ;
}

なんとも残念な結果になってしまいました。
ここで大切になってくるのが残り２つのプロパティです。

border-image-slice

border-image-slice は、border-imageに対する画像の使用範囲を指定します。
初期値は「100%」。

ですので、先程のように画像は全体(100%)が使用され、border-image-width(10px)にあわせて縮小されています。

もしborder-image-slice：50%;と指定すると、上の辺には画像の上から50%、右の辺には画像の右から50％、、という具合に各々切り取られます。

%ではなく数値で指定した場合、px値で計算されます。（10と指定すれば10px）。（ただしベクター画像を利用した場合は数値指定 = %となります）

指定値が元の画像よりも大きくなった場合は100%に自動変換されるのでご注意。

ここから少し分かりにくくなるのですが、頑張って説明しますのでついてきてください。

border-imageをsliceで分割する場合、最初に四隅の角が決定され、角の間の辺は次に指定するborder-image-repeatによって調整されます。

文章では分かりにくいと思うので、先程の例にborder-image-slice:33%;を追加してみます。
上下左右から約3分の１ずつとるので、の模様が一列分ずつ適用されるはずです。

（見ての通り、グラデーションかけるだけならここまでで出来てしまうのですが、もう少しお付き合いください。）

説明画像と合わせて見てもらうと分かりますが、四隅の角には画像の33％分がぞれぞれ配置され、辺は引き伸ばされています。

この辺の部分をどうするか調節するのが、最後のborder-image-repeatです。

書き忘れていましたが、border-image-sliceも複数の値をセットできます。書き方はborder-image-widthと同じです。

また、border-image-sliceの値に「fill」を併用すると要素の内側まで背景が浸食します。

ついでなんでやっておきます。

.sample1{
  border-image-slice: 33% 16% ;　/* 追加 */
}
.sample2{
  border-image-slice: 33% fill ;　/* 追加 */
}

画像の方はsliceの左右を16％にしたので、四隅に使われる画像部分が小さくなり、上下の引き伸ばされる部分が増えました。

fillを指定した場合、backgroundより上に表示されますので、使用の際はご注意ください。

border-image-repeat

最後は辺の部分をどう処理するか指定するborder-image-repeatです。

「background-repeat」と一緒だろと思ったら失敗してしまうプロパティ。

指定できる値は
「stretch（初期値）」「round」「space」「repeat」の４種類。

先程までは指定していないのでstretch（引き伸ばし）となっていました。

これは見たほうが早いので一挙サンプルです。

stretch以外の３つはどれを指定しても辺を埋めるために繰り返されます。違いは半端部分の処理です。分かりにくいですが改めて見比べてみてください

round	半端が出ないように引き伸ばして調整
space	空白を設けて調整する
repeat	単純に繰り返しで埋める（その結果隅っこが欠ける）

border-image-repeatに値を２つ指定すると上下・左右を調整できます。３つ以上の指定はエラーです。

以上でborder-imageプロパティの説明終了ですがどうでしょう？　説明下手なのでかなり長丁場となってしまいましたが、「分かった！」と思ってくだっていれば幸いです。