CSS を使用してブロックの端をフェザリングする方法を学びます

Question

CSS を変更してボックスの端にぼかし効果を加えるにはどうすればよいですか?ボックスの背景に曇りガラスの効果を持たせ、周囲の鋭いエッジの代わりに徐々に背景に溶け込むぼかし効果を持たせたいのですが、現在の CSS を変更する方法がわかりません。ご協力をよろしくお願いいたします。

.wrap {
  位置: 相対的;
  幅: 100%;
  高さ: 100vh;
  背景画像: url('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1625 &アンプ;q= 80 ');
  背景サイズ: カバー;
  。箱 {
    位置: 絶対;
    左: 50%。
    トップ: 50%;
    変換: 変換(-50%, -50%);
    幅: 200ピクセル;
    高さ: 200ピクセル;
    背景色: 赤;
    境界半径: 50%;
    背景色: rgba(225, 225, 225, 10%);
    背景フィルター: ぼかし(2px);
  }
}

<div class="wrap">
  <div class="box"></div>
</div>

Answer 1

私が理解しているのは、以下のコード スニペットを追加することだけです:

box-shadow: inset 2px 2px 15px #fff; // または ボックスシャドウ: インセット 2px 2px 15px rgba(255,255,255,.5)