Η συνάρτηση circle() CSS

Ορισμός και χρήση

Η 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 Στη θέση)
Τιμή Περιγραφή
radius

Απαιτείται. Ορίζει τον ακτίνα της σφαίρας. Μπορεί να είναι μια από τις εξής τιμές:

  • Τιμή μήκους
  • Ποσοστό
  • closest-side: Χρησιμοποιεί τη διαδρομή από το κέντρο της μορφής μέχρι το πιο κοντινό μέρος του αναφοράς πλαισίου.
  • farthest-side: Χρησιμοποιεί τη διαδρομή από το κέντρο της μορφής μέχρι το πιο μακρινό μέρος του αναφοράς πλαισίου.
Στη θέση

Προαιρετική. Ορίζει τη θέση του κέντρου της σφαίρας.

Μπορεί να είναι τιμή μήκους, ποσοστό ή τιμές όπως left, right, top ή bottom.

Η προεπιλεγμένη τιμή είναι center.

Τεχνικές λεπτομέρειες

Έκδοση: CSS Shape Module Level 1

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τаблицή περιλαμβάνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Σχετικές σελίδες

Αναφορά:CSS clip-path attribute

Αναφορά:CSS εξωτερική μορφή ιδιότητα

Αναφορά:Η συνάρτηση ellipse() CSS

Αναφορά:Λειτουργία inset() της Ατριβής

Αναφορά:Λειτουργία polygon() της Ατριβής