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=16 25 &q= 80');
  배경 크기: 표지;
  .상자 {
    위치: 절대;
    왼쪽: 50%;
    최고: 50%;
    변환: 변환(-50%, -50%);
    너비: 200px;
    높이: 200px;
    배경색: 빨간색;
    테두리 반경: 50%;
    배경색: rgba(225, 225, 225, 10%);
    배경 필터: 흐림(2px);
  }
}

Answer 1

제가 이해한 것은 아래에 코드 조각을 추가하는 것뿐입니다.

box-shadow: 삽입 2px 2px 15px #fff // 또는 상자 그림자: 삽입 2px 2px 15px rgba(255,255,255,.5)