Función ellipse() de CSS

Definición y uso

CSS ellipse() La función define un ellipse con dos radios x e y.

ellipse() La función generalmente se usa con clip-path Propiedad y shape-outside usar juntos.

Propiedad

Ejemplo

Ejemplo 1

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

Prueba por tu cuenta

Cortar la imagen en un ellipse con radio x del 50% y radio y del 30%:

Ejemplo 2

img {
  Cortar la imagen en un ellipse con radio x del 50% y radio y del 30%, y ubicar el centro del ellipse a la derecha:
}

Prueba por tu cuenta

clip-path: ellipse(50% 30% at right);

Ejemplo 3 clip-path y ellipse() Lograr efectos de animación: usar

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

Prueba por tu cuenta

Ejemplo 4

utilizar juntos ellipse()、clip-path y shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

Prueba por tu cuenta

Sintaxis de CSS

ellipse(xy-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 esta función por primera vez.

Páginas relacionadas

Referencia:Atributo clip-path CSS

Referencia:Atributo CSS shape-outside

Referencia:Función circle() de CSS

Referencia:Función inset() de CSS

Referencia:Función polygon() de CSS