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

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

CSS radial-gradient() Η συνάρτηση ορίζει την ακτινική παραλλαγή ως εικόνα φόντου.

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

Για να δημιουργηθεί ακτινική παραλλαγή, πρέπει να οριστούν τουλάχιστον δύο χρωματικές σημαίες.

Παράδειγμα ακτινικής παραλλαγής:

Παράδειγμα

Παράδειγμα 1

Ακτινική παραλλαγή με ομοιόμορφη κατανομή χρωμάτων:

#grad {
  background-image: radial-gradient(red, green, blue);
}

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

Παράδειγμα 2

Διαφορετικές κατανομές χρωμάτων σε ακτινική παραλλαγή:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

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

Παράδειγμα 3

Κωνική κλίμακα με γωνιακή μορφή:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

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

Παράδειγμα 4

Χρήση διαφορετικών λέξεων μεγέθους για τις ακτίνα της κωνικής κλίμακας:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

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

Γραμματική CSS

radial-gradient(μορφή μέγεθος στο θέση, start-color, ... , last-color);

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

Υποστήριξη περιηγητή

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

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

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

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

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

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

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

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

Αναφορά:Λειτουργία CSS repeating-radial-gradient()