CSS 오프셋 거리 속성

정의와 사용법

offset-distance 속성은 요소와 offset-path 속성이 정의된 경로 출발점 간의 거리.

<img> 요소가 정의된 경로에 배치되며, 경로 출발점에서 33%의 위치에 있습니다.

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-distance: 33%;
}

offset-distance: auto|length|initial|inherit;

값	설명
0	요소가 경로의 출발점에 배치됩니다. 기본 값.
length	고정 단위(예: px, pt, cm 등)를 사용하여 요소와 경로 출발점 간의 거리를 지정합니다. 부정적인 값을 허용하지 않습니다. 참고:CSS 단위.
%	경로 길이에 대한 퍼센트 거리를 지정합니다.
initial	이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit	부모 요소에서 이 속성을 상속합니다. 참고: inherit.

기본 값:	0
상속성:	아니요
애니메이션 제작:	지원. 참고:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.offsetDistance="200px"

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

크롬	에지	파이어폭스	사파리	오페라
55	79	72	16	42