Recommandation de cours :

Fonction circle() CSS

Définition et utilisation de CSS circle() La fonction CSS est utilisée pour définir un cercle avec un rayon et une position.

circle() Les fonctions sont généralement utilisées avec clip-path Les attributs et shape-outside Les attributs sont utilisés ensemble.

Exemple

Exemple 1

Couper l'image en cercle de rayon 50% :

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

Essayer par vous-même

Exemple 2

Couper l'image en cercle de rayon 50% et centrer le cercle à droite :

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

Essayer par vous-même

Exemple 3

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

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

Essayer par vous-même

Exemple 4

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

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

Essayer par vous-même

Syntaxe CSS

circle(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 pleinement 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 ellipse() CSS

Référence :Fonction inset() CSS

Référence :Fonction polygon() CSS