Fonction ellipse() CSS

Définition et utilisation

CSS ellipse() La fonction définit une ellipse ayant deux rayons x et y.

ellipse() Les fonctions sont généralement utilisées avec clip-path Attributs et shape-outside Utiliser ensemble les attributs.

Exemple

Exemple 1

Couper l'image en ellipse de rayon x de 50% et de rayon y de 30% :

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

Essayez-le vous-même

Exemple 2

Couper l'image en ellipse de rayon x de 50% et de rayon y de 30%, et centrer l'ellipse à droite :

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

Essayez-le vous-même

Exemple 3

Utiliser clip-path et ellipse() Réaliser l'effet d'animation :

#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%);}
}

Essayez-le vous-même

Exemple 4

combiné ellipse()、clip-path et shape-outside:

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

Essayez-le vous-même

Syntaxe CSS

ellipse(xy-radius à la position)

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Pages associées

Référence :Attribut clip-path CSS

Référence :Attribut shape-outside CSS

Référence :Fonction circle() CSS

Référence :Fonction inset() CSS

Référence :Fonction polygon() CSS