CSS conic-gradient() function

Definition and usage

CSS conic-gradient(); The function sets the conic gradient as the background image.

Conic gradient is a gradient of color transition rotating around the center point (similar to pie chart and color wheel).

To create a conic gradient, you must define at least two color stop points.

Conic gradient example:

Instance

Example 1

There is a conic gradient with three colors:

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

Δοκιμάστε το個人τικά

Example 2

There is a conic gradient with five colors:

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

Δοκιμάστε το個人τικά

Example 3

There are three colors, and an angle is specified for each color in the conic gradient:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Δοκιμάστε το個人τικά

Example 4

Through adding border-radius: 50%, the conic gradient looks like a pie chart:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Δοκιμάστε το個人τικά

παράδειγμα 5

κωνική διαφάνεια με γωνία έναρξης:

#grad {
  background-image: conic-gradient(από 90deg, red, yellow, green);
  border-radius: 50%;
}

Δοκιμάστε το個人τικά

παράδειγμα 6

κωνική διαφάνεια με κεντρική θέση:

#grad {
  background-image: conic-gradient(στο 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Δοκιμάστε το個人τικά

παράδειγμα 7

συγχρόνως με κεντρική θέση και γωνία έναρξης της κωνικής διαφάνειας:

#grad {
  background-image: conic-gradient(from 90deg στο 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Δοκιμάστε το個人τικά

παράδειγμα 8

ένας άλλος παράδειγμα πίτας:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Δοκιμάστε το個人τικά

Γλώσσα CSS

background-image: conic-gradient([από γωνία] θέση,] χρώμα γωνία, χρώμα γωνία, ... );
τιμή περιγραφή
από γωνία προαιρετικό. Η ολόκληρη η κωνική διαφάνεια θα γυρίσει σε αυτή τη γωνία. Η προεπιλεγμένη τιμή είναι 0deg.
στο θέση προαιρετικό. Ορίζει τη θέση του κέντρου της κωνικής διαφάνειας. Η προεπιλεγμένη τιμή είναι center.
χρώμα γωνία, ... , χρώμα γωνία

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

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

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

Έκδοση: CSS3

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

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

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

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

Αναφορά:Παράμετρος background-image CSS

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

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

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

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

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