Ketahui cara untuk mencapai kesan bulu dengan mengubah suai tepi blok dengan CSS

Question

Bagaimanakah saya boleh mengubah suai CSS saya untuk mempunyai kesan kabur berbulu pada tepi kotak? Saya ingin latar belakang kotak mempunyai kesan kaca beku, dan bukannya tepi tajam di sekelilingnya, mempunyai kesan berbulu yang secara beransur-ansur bergabung dengan latar belakang, tetapi saya tidak tahu bagaimana untuk mengubah suai CSS semasa. Semoga mendapat bantuan anda, terima kasih.

.wrap {
  kedudukan: relatif;
  lebar: 100%;
  ketinggian: 100vh;
  imej latar belakang: url('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx5& ;q= 80');
  saiz latar belakang: penutup;
  .kotak {
    jawatan: mutlak;
    kiri: 50%;
    atas: 50%;
    mengubah: terjemah(-50%, -50%);
    lebar: 200px;
    ketinggian: 200px;
    warna latar belakang: merah;
    jejari sempadan: 50%;
    warna latar belakang: rgba(225, 225, 225, 10%);
    backdrop-filter: blur(2px);
  }
}

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

Answer 1

Apa yang saya faham cuma tambahkan sebarang coretan kod di bawah:

bayang-kotak: inset 2px 2px 15px #fff; bayang kotak: masukkan 2px 2px 15px rgba(255,255,255,.5)