CSS circle() 함수

정의와 사용법

CSS의 circle() 함수를 사용하여 반지름과 위치를 가진 원을 정의합니다.

circle() 함수는 일반적으로 clip-path 속성과 shape-outside 속성을 함께 사용합니다。

예제

예제 1

이미지를 반지름이 50%인 원형으로 잘라냅니다：

img {
  clip-path: circle(50%);
}

직접 테스트해 보세요

예제 2

이미지를 반지름이 50%인 원형으로 잘라내고, 원심을 오른쪽에 위치시킵니다：

img {
  clip-path: circle(50% at right);
}

직접 테스트해 보세요

예제 3

사용 clip-path 와 circle() 애니메이션 효과 구현：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

직접 테스트해 보세요

예제 4

결합 사용 circle()、clip-path 와 shape-outside：

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

직접 테스트해 보세요

CSS 문법

circle(radius 위치에서)

기술 세부 사항

浏览器支持

표中的数字表示首个完全支持该函数的浏览器版本。

관련 페이지

참조:CSS clip-path 속성

참조:CSS shape-outside 속성

참조:CSS ellipse() 함수

참조:CSS inset() 함수

참조:CSS polygon() 함수