CSS shape-outside 속성

정의 및 사용법

shape-outside 속성은 행 내 내용에 대한 둘러싸기 형태를 정의할 수 있습니다. 기본적으로 행 내 내용은 외간격 브로우저를 둘러싸고 있으며, shape-outside를 사용하여 이러한 둘러싸기 방식을 사용자 정의할 수 있습니다.

shape-outside 속성은浮动 요소의浮动 영역을 정의합니다. 이浮动 영역은 행 내 내용이浮动 요소를 둘러싸고 있는 형태를 정의합니다。

이미지를 둘러싸는 원형으로 행 내 내용을 둘러싸습니다:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

값	설명
none	기본 값. 浮动 영역에 영향을 미치지 않습니다. 행 내 내용은 요소의 외간격 브로우저를 둘러싸고 있습니다。
margin-box	외간격 외边缘으로 둘러싸인 형태를 정의합니다。
border-box	불러받은边缘으로 둘러싸인 형태를 정의합니다。
padding-box	내간격 외边缘으로 둘러싸인 형태를 정의합니다。
content-box	내용边缘으로 둘러싸인 형태를 정의합니다。 이 창의 각 모서리의 반지름은 0 또는 border-radius - border-width - padding 중 큰 값입니다。
basic-shape	浮动 영역은 inset()、circle()、ellipse() 또는 polygon() 함수의 형태를 기반으로 합니다。
url(이미지)	浮动 영역은 지정된 이미지의 alpha 채널을 기반으로 하며, shape-image-threshold에 의해 정의됩니다。
initial	이 속성을 기본 값으로 설정합니다. 참조 initial。
inherit	이 속성을 부모 요소에서 상속합니다. 참조 inherit。

기본 값:	none
상속성:	아니요
애니메이션 제작:	basic-shape에 대해 yes. animatable에 대해 알아보세요
버전:	CSS Shapes 모듈 레벨 1
JavaScript 문법:	object.style.shapeOutside="circle(50%)"

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

크롬	에지	파이어폭스	사파리	오페라
37	79	62	10.1	24