採用情報ブログBLOGTips2019.10.09author:シオリWEBデザイナーCSSでボーダーにグラデーションをかけてオシャレなboxを作ろうこんにちは、最近は肌寒くなってきましたね。コンビニおでんは大根が好き、そんな私です。今回はcssについてのちょっとしたtipsです。取り入れられるようになりましたね。今のところ、borderにグラデーションをかける方法はありません。そこで今回は他の要素を使って疑似的にグラデーションのborderを表現する方法を紹介します。◇デメリット・記述が長い・ななめのグラデーションに対応できないまずはお手軽な方法、私もだいたいはこれで対応しています。boxの上下または左右に疑似要素::beforeと::afterを作り、疑似要素の背景をグラデーションにすることで、グラデーションの線を表現しています。残った2つの線は単色のborderを設定します。画像を表示させることでレスポンシブにも対応できます。border-image-sliceで画像を伸縮させています。stretch;このようにborder-imageでまとめて指定することもできます。使用した画像はこちらです。・ななめにもグラデーションできる◇デメリット・前面の要素を塗りつぶしているのでデザイン次第では対応できないこちらもよく使われる方法です。入れ子構造にした後ろ側のboxにグラデーションを設定する方法で、入れ子にする分コードが増えますが、ななめのグラデーションにも対応できます。CodePen.サイトの背景色にあわせて.gradBox3Innerのbackground-colorを変更してください。まとめグラデーションのboxを作る方法を3点ご紹介しました。同じ表現でもいくつものやり方があるのが面白いですね。使う場所によって適した方法を取っていきたいです。