Συνάρτηση repeating-conic-gradient() του CSS

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

CSS repeating-conic-gradient() Η συνάρτηση χρησιμοποιείται για την αναπαραγωγή της κωνικής διανυσματικής.

Παράδειγμα:

κωνική διανυσματική αναπαραγωγική κωνική διανυσματική
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

Παράδειγμα

Παράδειγμα 1

Μια επαναλαμβανόμενη κωνική κλίμακα:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

Δοκιμάστε το شخصικά

Παράδειγμα 2

Ορίζει την επαναλαμβανόμενη κωνική κλίμακα με τις αρχικές και τελικές θέσεις χρώματος:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Δοκιμάστε το شخصικά

Παράδειγμα 3

Μια άλλη επαναλαμβανόμενη κωνική κλίμακα με ορισμένο τον κεντρικό γωνία και τη θέση:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Δοκιμάστε το شخصικά

Γλωσσάρα CSS

repeating-conic-gradient([from Γωνία], [at Θέση,] Χρώμα γωνία, Χρώμα γωνία, ...);
Τιμή Περιγραφή
from Γωνία

Προαιρετικό. Η ολόκληρη η κωνική κλίμακα γυρίζει σε αυτόν τον γωνία.

Προεπιλεγμένη τιμή: 0deg
at Θέση

Προαιρετικό. Ορίζει τον κεντρικό σημείο της κωνικής κλίμακας.

Προεπιλεγμένη τιμή: center
Χρώμα γωνία, ... Χρώμα γωνία

Το σημείο λήξης του χρώματος είναι το χρώμα που θέλετε να εμφανίζεται με ομαλή μετάβαση.

Αυτό το όρισμα αποτελείται από τιμές χρώματος και μια ή δύο προαιρετικές θέσεις λήξης (γωνία από 0 έως 360 βαθμούς ή ποσοστό από 0% έως 100%)

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

Έκδοση: CSS Εικόνες Μοντέλο Επίπεδο 4

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

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

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

Εκμάθηση:CSS κλίμακα

Αναφορά:Αξία background-image CSS

Αναφορά:CSS κωνική κλίμακα() συνάρτηση

Αναφορά:CSS οριζόντια κλίμακα() συνάρτηση

Αναφορά:CSS ακτινική κλίμακα() συνάρτηση

Αναφορά:CSS repeating-linear-gradient() συναρτηση

Αναφορά:CSS επαναλαμβανόμενη ακτινική κλίμακα() συνάρτηση