CSS inset() 함수

정의와 사용법

CSS의 inset() 함수는 참조 상자의 각 측면에 지정된 내부 거리를 가진 사각형을 정의합니다.

inset() 함수는 일반적으로 clip-path 속성과 shape-outside 속성을 동시에 사용합니다.

예제

예제 1

두 개의 <div> 요소를 참조 상자의 각 측면에 지정된 내부 거리로 정사각형으로 잘라냅니다:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

직접 테스트해 보세요

예제 2

사용 clip-path 와 inset() 동작 효과를 구현하려면:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

직접 테스트해 보세요

예제 3

동시에 사용 inset()、clip-path 와 shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

직접 테스트해 보세요

CSS 문법

inset(length-percentage round border-radius)

기술 세부 사항

브라우저 지원

표中的 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

참조:CSS clip-path 속성

참조:CSS shape-outside 속성

참조:CSS circle() 함수

참조:CSS ellipse() 함수

참조:CSS polygon() 함수