CSS 오프셋 앵커 속성

정의와 사용법

offset-anchor 속성이 요소를 정의된 경로에 고정합니다. offset-path 속성이 정의된 경로의 점.

offset-path offset-rotate 속성이 요소를 회전하면 offset-anchor 속성 정의된 점도 회전 중심이 됩니다.

<img> 요소의 오른쪽 중심점을 정의된 경로에 고정합니다:

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: right center;
}

offset-anchor: auto|value|initial|inherit;

값	설명
auto	기본 값. 앵커는 요소의 중심에 위치하며, 속성 값 50% 50%와 동일합니다.
left top left center left bottom right top right center right bottom center top center center center bottom	단어만 지정하면 다른 값은 "center"가 됩니다.
xpos ypos	첫 번째 값은 수평 위치이고 두 번째 값은 수직 위치입니다. 왼쪽 상단은 0 0입니다. 단위는 픽셀(0px 0px)이나 다른 CSS 단위일 수 있습니다. 값을 하나만 지정하면 다른 값은 50%가 됩니다. %와 위치를 혼합 사용할 수 있습니다.
x% y%	첫 번째 값은 수평 위치이고 두 번째 값은 수직 위치입니다. 왼쪽 상단은 0% 0%입니다. 오른쪽 하단은 100% 100%입니다. 값을 하나만 지정하면 다른 값은 50%가 됩니다. 기본 값은 50% 50%입니다.
initial	이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit	부모 요소에서 이 속성을 상속합니다. 참고: inherit.

기본 값:	auto
상속성:	아니요
애니메이션 제작:	지원됩니다. 참고:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.offsetAnchor="bottom right"

표格에 나타난 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
116	116	72	16	102