Recomendaciones de curso:

Función circle() de CSS

Definición y uso de CSS circle() Funciones se utilizan para definir un círculo con radio y posición.

circle() Funciones generalmente se utilizan con clip-path Propiedades y shape-outside Usar propiedades juntas.

Ejemplo

Ejemplo 1

Cortar la imagen en un círculo de radio 50%:

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

Prueba personal

Ejemplo 2

Cortar la imagen en un círculo de radio 50% y colocar el centro a la derecha:

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

Prueba personal

Ejemplo 3

Usar clip-path y circle() Lograr efecto de animación:

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

Prueba personal

Ejemplo 4

usar juntos circle()、clip-path y shape-outside:

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

Prueba personal

Sintaxis de CSS

circle(radius en la posición)

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Referencia:Atributo clip-path de CSS

Referencia:Atributo CSS shape-outside

Referencia:Función ellipse() de CSS

Referencia:Función CSS inset()

Referencia:Función CSS polygon()