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-side 와 farthest-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

브라우저 호환성

BCD tables only load in the browser

같이 보기