dedede 
背景
figmaで作ったグラデーションの枠を作るのに簡単な方法で実装したいと思い、調べてみて試したところcss4行でできたので備忘録として残しておきます。border-image-sourceを使いますが、img画像は不要です。なおfigmaで作ったグラデーションの枠を使うことを想定して手順を記します。最終的には以下のようなグラデージョンがcss4行でできます。
figmaでborder-image-source(画像不要)を取得
figmaである必要はないのですが、これが視覚的に一番簡単に作れるのでfigmaを採用しています。
figmaで四角形を作り、以下のように設定してください.。グラデーションの具合は画像の点を動かせば調整できます。
- Fill:#fff
- Stroke : Linear
- 任意の色でグラデーションを作り、角度を設定。
その後InspectからBordersのCopyを押せば準備は完了です。ペーストしてみると以下のようなコードが表示されます。(角度や色の値は設定した値によって違います)
これで準備はひとまずOKです。あとはcss4行で実装できます。
border: 5px solid;
border-image-source: linear-gradient(112.88deg, #FFD6FB 0%, #FFFFFF 100%);cssを追加
以下の4行をstyle.cssに追加すればOKです。
重要なのはborder-image-slice: 1;です。値はなんでもいいのですが、これがないとボーダーが出現しません。本来sliceはborder-image-sourceの分割に使用しますが、今回は”実体化”のようなイメージで使用していると考えていただければ良いと思います。
.border{/*borderクラスの枠をグラデーションカラーに*/
border: 5px solid;
border-image-source: linear-gradient(112.88deg, #FFD6FB 0%, #FFFFFF 100%);
border-image-slice: 1;/*borderを実体化*/
border-image-width: 10px;/* 任意 borderの太さ*/
}念の為htmlも書いておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>枠(border)のグラデーション</title>
</head>
<body>
<div class="border">このブロックのボーダーをグラデーション</div>
</body>
</html>まとめ
めんどくさそうなboderデコレーションの枠がfigma×css4行で実装できます。
