こんにちは、最近は肌寒くなってきましたね。
コンビニおでんは大根が好き、そんな私です。

今回はcssについてのちょっとしたtipsです。
css3でlinear-gradientが使えるようになってから、cssでのグラデーションが 取り入れられるようになりましたね。
しかし今のところ、borderにグラデーションをかける方法はありません。
そこで今回は他の要素を使って疑似的にグラデーションのborderを表現する方法を紹介します。

方法1、疑似要素の背景にグラデーションを設定

◇メリット
・レスポンシブ対応
・cssだけで出来るのでお手軽

◇デメリット
・記述が長い
・ななめのグラデーションに対応できない

まずはお手軽な方法、私もだいたいはこれで対応しています。
boxの上下または左右に疑似要素::beforeと::afterを作り、疑似要素の背景をグラデーションにすることで、グラデーションの線を表現しています。
残った2つの線は単色のborderを設定します。

See the Pen rNNaBNG by Infocrest Co., Ltd. (@Infocrest) on CodePen.

方法2、border-imageに画像を設定

◇メリット
・レスポンシブ対応

◇デメリット
・画像を作る必要がある
・値の設定が少し複雑

画像を作らなければならないのがネックですがborder-imageで 画像を表示させることでレスポンシブにも対応できます。
border-image-sliceで画像を伸縮させています。

See the Pen gradation02 by Infocrest Co., Ltd. (@Infocrest) on CodePen.

border-image-sliceやborder-image-repeatは

border-image: url("画像URL") 1 stretch;

このようにborder-imageでまとめて指定することもできます。

使用した画像はこちらです。

方法3、要素を入れ子にして背面にグラデーションを設定

◇メリット
・設定が簡単
・ななめにもグラデーションできる

◇デメリット
・前面の要素を塗りつぶしているのでデザイン次第では対応できない

こちらもよく使われる方法です。
入れ子構造にした後ろ側のboxにグラデーションを設定する方法で、入れ子にする分コードが増えますが、ななめのグラデーションにも対応できます。

See the Pen gradation03 by Infocrest Co., Ltd. (@Infocrest) on CodePen.

サイトの背景色にあわせて.gradBox3Innerのbackground-colorを変更してください。
ななめ方向のグラデーションはbackground: linear-gradientのto right bottom で指定しています。

まとめ

グラデーションのboxを作る方法を3点ご紹介しました。
同じ表現でもいくつものやり方があるのが面白いですね。
使う場所によって適した方法を取っていきたいです。