borderのグラデーションの時に一部詰まったため、その時のメモになります。

行おうとしたこと

カードのUI
ボーダーはグラデーションにしたい
カードの縁は角丸にする

結果

最終的に今回制作したものの最終版になります。どのようなことをしたかなどについては以下に説明いたします。

対応したこと

1. ボーダー自体にグラデーションをかける

こちらを参考にborderのグラデーションを実行

delaymania.com

結果については以下になります。

使用したcssプロパティについて

borderのグラデーションをしない場合、背景色のグラデーションと同様、 imageとして記載を行う

developer.mozilla.org

ボーダー画像の使用範囲を指定するために使用

developer.mozilla.org

この場合だと以下のように border-radiusを宣言しても角丸にならないため、今回は不採用

2. 2つのdiv要素を作成して、各々にbackgroundを設定

1の方法でうまくいかなかったため、以下のようなイメージで制作

<div class="hoge1"> <!-- グラデーションの背景 -->
  <div class="hoge2"></div> <!-- 白色の背景 -->
</div>

cssは以下のように記載

親要素のcss

.hoge1 {
  width: 100%;
  height: 200px;
  padding: 6px;
  background-image: linear-gradient(135deg, #6ccaff 0%, #b398ff 100%);
  border-radius: 10px;
}

横幅・縦幅は任意
paddingでグラデーションの適応範囲を指定
background-imageでグラデーション、border-radiusで角丸の範囲を指定

developer.mozilla.org

子要素のcss

.hoge2 {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
}

横幅・縦幅は100%（親要素の幅が変更されても可変で適応させるため）
background背景色（今回は白色、他の色にしたい場合はここの部分を変更）
中の要素でもborder-radiusを指定
- 親と同じ値の場合幅が違う都合上、少し違和感があるため少し小さい値を宣言
- 中の要素を指定しない場合は以下のようになる