circle()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

circle() CSS 함수 는 둥글기와 위치를 이용하여 원 도형을 정의합니다. <basic-shape> 데이터 타입 중 하나입니다.

시도해보기

구문

css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

<shape-radius>

<length><percentage> 혹은 closest-sidefarthest-side 값도 가능합니다.

closest-side

도형의 중심에서 기준 박스의 가장 가까운 면까지의 길이를 사용합니다. 원 도형의 경우에는, 모든 차원에서 가장 가까운 면을 사용합니다.

farthest-side

도형의 중심에서 기준 박스의 가장 먼 면까지의 길이를 사용합니다. 원 도형의 경우에는, 모든 차원에서 가장 멀리 떨어져 있는 면을 사용합니다.

<position>

원 도형의 중심을 이동합니다. <length>, <percentage> 혹은 left 와 같은 형태의 값도 사용할 수 있습니다. <position> 값이 생략되는 경우 기본값은 중심입니다.

형식 구문

<circle()> = 
circle( <radial-size>? [ at <position> ]? )

<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side

<length-percentage> =
<length> |
<percentage>

예제

기본 원 도형

아래 예제에서는 shape-outside 속성은 주변으로 흐르는 텍스트 위에 띄워진 형태로 circle(50%) 값을 가진 원 도형을 정의합니다.

명세서

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-circle

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
circle()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기