CSS konika-gradiendi() funktio

Määrittely ja käyttö

CSS: konika-gradiendi() Funktiolla asetetaan konika-gradiendi taustakuvaan.

Konika-gradiendi on väriä vaihtuva peittaus, joka pyörii keskuspiste ympärillä (samankaltainen pallografiikalle ja väripyörälle).

Konika-gradiendi luomiseen on määritettävä vähintään kaksi väri pysähdyspistettä.

On kolme väriä:

#grad {
  background-image: konika-gradiendi(punainen, keltainen, vihreä);
}

On viisi väriä:

#grad {
  background-image: konika-gradiendi(punainen, keltainen, vihreä, sininen, musta);
}

On kolme väriä, ja jokaiselle väriselle on määritetty kulma:

#grad {
  background-image: konika-gradiendi(punainen 45astetta, keltainen 90astetta, vihreä 210astetta)
}

Lisäämällä border-radius: 50% konika-gradiendi näyttää pallografiikalta:

#grad {
  background-image: konika-gradiendi(punainen, keltainen, vihreä, sininen, musta);
  border-radius: 50%;
}

Alkukulmalla oleva sätegradientti:

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

Keskipisteellä oleva sätegradientti:

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

Samalla alkokulman ja keskipisteen kanssa oleva sätegradientti:

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

Toinen piirin esimerkki:

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

background-image: conic-gradient([from kulma] sijainti,] väri aste, väri aste, ...);

Arvo	Kuvaus
from kulma	Valinnainen. Koko sätegradientti pyörii tämän kulman suhteen. Oletusarvo on 0deg.
at sijainti	Valinnainen. Määritä sätegradientin keskipiste. Oletusarvo on center.
väri aste, ... , väri aste	Väri pysähtymispiste on väri, jonka haluat näkyvän väriä vaihdettaessa. Arvo koostuu väriarvosta ja valinnaisesta pysähtymispaikasta (0-360 asteen kulma tai 0-100 %:n prosenttiosuus).

Arvo

Kuvaus

from kulma

Valinnainen. Koko sätegradientti pyörii tämän kulman suhteen. Oletusarvo on 0deg.

at sijainti

Valinnainen. Määritä sätegradientin keskipiste. Oletusarvo on center.

väri aste, ... , väri aste

Väri pysähtymispiste on väri, jonka haluat näkyvän väriä vaihdettaessa.

Arvo koostuu väriarvosta ja valinnaisesta pysähtymispaikasta (0-360 asteen kulma tai 0-100 %:n prosenttiosuus).