CSS repeating-radial-gradient() συνάρτηση

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

CSS επαναληπτική-ακτινική-διάυλες-κλίμακες() η συνάρτηση χρησιμοποιείται για την επαναλαμβανόμενη ακτινική διαφάνεια.

παράδειγμα:

ακτινική διαφάνεια επαναλαμβανόμενη ακτινική διαφάνεια
radial-gradient(red, yellow, green); repeating-radial-gradient(red, yellow 10%, green 15%);

παράδειγμα

παράδειγμα 1

ένας επαναλαμβανόμενος ακτινικός διαφάνεια:

#grad {
  background-image: επαναληπτική-ακτινική-διάυλες-κλίμακες(red, yellow 10%, green 15%);
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Ενας άλλος επαναληπτικός ακτινικός διάυλες, ορίζει τη μορφή, το μέγεθος και τη θέση:

#grad1 {
  background-image: επαναληπτική-ακτινική-διάυλες-κλίμακες(ελλipsoid τελική-γωνία στο 25% 25%, red, yellow 10%, green 15%);
}

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Ενας άλλος επαναληπτικός ακτινικός διάυλες, ορίζει δύο θέσεις σταμάτησης χρώματος:

#grad1 {
  background-image: επαναληπτική-ακτινική-διάυλες-κλίμακες(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

Δοκιμάστε το προσωπικά

Γλωσσικό στυλ CSS

επαναληπτική-ακτινική-διάυλες-κλίμακες(μορφή μέγεθος στο θέση, αρχικό-χρώμα, ... , τελευταίο-χρώμα);
Τιμή Περιγραφή
μορφή

Ορίζει τη μορφή της διανύσσης. Πιθανές τιμές:

  • ελλipsoid (προεπιλεγμένο)
  • κυκλός
μέγεθος

Ορίζει το μέγεθος της διανύσσης. Πιθανές τιμές:

  • τελευταία-γωνία（προεπιλεγμένο）
  • πρώτη-πλευρά
  • πρώτη-γωνία
  • τελευταία-πλευρά
στο θέση Ορίζει τη θέση της διανύσσης. Η προεπιλεγμένη τιμή είναι "center".
αρχικό-χρώμα, ... , τελευταίο-χρώμα

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

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

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

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

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

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

Chrome Edge Firefox Safari Opera
επαναληπτική-ακτινική-διάυλες-κλίμακες()
26 10 16 6.1 12.1
Δύο θέσεις των σημείων τελικής χρώσης
71 79 64 12.1 58

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

Εκμάθηση:CSS διαφάνεια

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

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

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

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

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

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