CSS로 블록의 가장자리를 수정하여 페더링 효과를 얻는 방법 알아보기
<p>상자 가장자리에 깃털 모양의 흐림 효과를 적용하려면 CSS를 어떻게 수정합니까? 상자의 배경에 반투명 유리 효과를 주고, 주변의 날카로운 모서리 대신 점진적으로 배경과 혼합되는 깃털 효과를 주고 싶지만 현재 CSS를 수정하는 방법을 모르겠습니다. 도움을 받으시길 바랍니다. 감사합니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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);
}
}</pre>
<pre class="brush:html;toolbar:false;"><div class="wrap">
<div class="box"></div>
<p><br /></p>
