## 예제1 ```html

``` ```css .frame-wrap { width: 400px; padding: 20px 40px; /* 액자 두께 */ background: #8B4513; /* 액자 색 (갈색) */ box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 입체감 */ } .photo { width: 400px; height: 300px; object-fit: cover; /* 이미지 가장자리를 잘라서 액자가 더 잘 보이게 */ /* clip-path: inset(30px); */ clip-path: polygon( 20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20% ); } ``` ## 예제2 ```html

``` ```css .frame-wrap { width: 400px; padding: 20px 40px; /* 액자 두께 */ background: #8B4513; /* 액자 색 (갈색) */ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 입체감 */ } .photo { width: 400px; clip-path: inset(50px); transition: clip-path 0.5s; } .photo:hover { clip-path: inset(0); } ``` ## 예제3 ```html

``` ```css .photo { width: 400px; animation: show 4s forwards; } @keyframes show { from { /* 완전히 가려짐 */ clip-path: inset(50% 50%); } to { /* 완전히 보임 */ clip-path: inset(0 0); } } ```

4_클립패스

구문

예제1

예제2

예제3

4_클립패스

구문

예제1

예제2

예제3