CSS ellipse() συνάρτηση

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

CSS ellipse() Η συνάρτηση ορίζει μια ελλειψοειδή με δύο ακτίνες x και y.

ellipse() Συνήθως χρησιμοποιούνται με clip-path Χαρακτηριστικά και shape-outside Χρησιμοποιώντας τα χαρακτηριστικά

Παράδειγμα

Παράδειγμα 1

Καταργήστε την εικόνα σε μια ελλειψοειδή με ακτίνα x 50% και ακτίνα y 30%:

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

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Καταργήστε την εικόνα σε μια ελλειψοειδή με ακτίνα x 50% και ακτίνα y 30% και το κέντρο της ελλειψοειδούς στο δεξί:

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

Προσπαθήστε το προσωπικά

Παράδειγμα 3

Χρησιμοποιώντας clip-path και ellipse() Υλοποίηση ενός εφέ κίνησης:

#myDIV {
  πλάτος: 100px;
  ύψος: 100px;
  χρώμα υποβάθρου: κόκκινο;
  χρώμα: πράσινο;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

Προσπαθήστε το προσωπικά

Παράδειγμα 4

συνδυασμός χρήσης ellipse()、clip-path και shape-outside:

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

Προσπαθήστε το προσωπικά

Γλώσσα CSS

ellipse(xy-radius στο σημείο)
Τιμή Περιγραφή
xy-radius

Απαιτείται. Ορίζει τους δύο ακτίνους x και y. Μπορεί να είναι μια από τις εξής τιμές:

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

Προαιρετικό. Ορίζει τη θέση του κέντρου της ελλειψοειδούς.

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

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

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

Έκδοση: CSS Σχήμα Μοντέλο Ρίθμισμα 1

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

Τα αριθμήματα στον πίνακα δείχνουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτή τη συνάρτηση.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

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

Αναφορά:CSS διαδρομή κόψματος

Αναφορά:CSS shape-outside ιδιότητα

Αναφορά:CSS κύκλος() συνάρτηση

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

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