Funguo ya CSS conic-gradient()

Ufafanuzi na matumizi

CSS ya conic-gradient() Funguo inaingiza uharifu wa conic-gradient kama picha ya mabaki.

Uharifu wa conic-gradient ni uharifu wa rangi wa kuzingatia kwa kina kwa kina (kama mbindi na kikweli).

Kuwaingia uharifu wa conic-gradient, lazima kufikiria kwa uharifu wa rangi mbili kwa eneo la kuzingatia.

Mfano wa uharifu wa conic-gradient:

Mfano

Mfano 1

Ina rangi tatu ya uharifu wa conic-gradient:

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

Kuendelea kufikia

Mfano 2

Ina rangi tano ya uharifu wa conic-gradient:

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

Kuendelea kufikia

Mfano 3

Ina rangi tatu na inaangalia ukosema angalendo kwa kila rangi ya uharifu wa conic-gradient:

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

Kuendelea kufikia

Mfano 4

Kwa kuongeza border-radius: 50% inafanya uharifu wa conic-gradient kuelekea kama mbindi:

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

Kuendelea kufikia

Mfano 5

Kina na cheo cha kuanzia:

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

Kuendelea kufikia

Mfano 6

Kina na chuo cha msingi:

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

Kuendelea kufikia

Mfano 7

Kina na cheo cha kuanzia na chuo cha msingi:

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

Kuendelea kufikia

Mfano 8

Mfano mwingine wa kina:

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

Kuendelea kufikia

Muundo wa CSS

background-image: conic-gradient([from cheo] mchezo,] cheo la rangi, cheo la rangi, ...);
Thamani Kielewa
kuwa cheo Inahofu. Mabara wa miguu wa mabara yote ya miguu ya mabara inaenda kwa cheo hii. Msingi wa kwamba ni 0deg.
kwenye mchezo Inahofu. Kusema chuo cha msingi wa mabara wa miguu. Msingi wa kwamba ni center.
cheo la rangi, ... , cheo la rangi

Kipa kwenye rangi ni rangi ambayo unajitahidi kuonesha mbinu ya uharibifu

Hivi ni thamani ya rangi na chaguo cha kina cha kufikia (cheo 0 hadi 360 au 0% hadi 100%)

Maelezo ya vifaa

Tohamu: CSS3

Mifanikio ya kusoma

Mifanikio ya tabia kwenye tabia ni mawakilishi wa cheo cha kwanza cha kufaa kwa programu ya kusoma

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

Mawasiliano ya hatua

Mafunzo:Muungano wa rangi wa CSS

Matokeo:Mwili wa CSS cha background-image

Matokeo:Fikia ya linear-gradient() kwa CSS

Matokeo:Fikia ya radial-gradient() kwa CSS

Matokeo:Fikia ya repeating-conic-gradient() kwa CSS

Matokeo:Fikia ya repeating-linear-gradient() kwa CSS

Matokeo:Faaingo la repeating-radial-gradient() katika CSS