CSS säteittäinen aaltosuunta

CSS säteittäinen aaltosuunta

Reuna-gradiento määritetään sen keskellä.

Jos haluat luoda reuna-gradientin, sinun on myös määritettävä vähintään kaksi värimerkintää.

syntaksi

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

oletusarvoisesti.shape ellipsin muotoon.size kaikkein kauimmas kulmaan.position keskipisteeseen.

Reuna-gradiento - tasaisesti jakautuneet värimerkinnät (oletus)

Seuraavassa esimerkissä näytetään reuna-gradiento, jossa värimerkinnät ovat tasaisesti jakautuneet:

Esimerkki

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

Kokeile itse

Reuna-gradiento - eri etäisyyksillä olevat värimerkinnät

Seuraavassa esimerkissä näytetään reuna-gradiento, jossa värien välit ovat erilaisia:

Esimerkki

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

Kokeile itse

Aseta muoto

shape Parametrit määrittelevät muodon. Se voi hyväksyä circle tai ellipse arvot. Oletusarvo on ellipse (ellipsi).

Seuraavassa esimerkissä näytetään ympyränmuotoinen reuna-gradiento:

Esimerkki

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

Kokeile itse

Käytä erikokoisia avainsanoja

size Parametrit määrittelevät gradientin koon. Se voi hyväksyä neljä arvoa:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Esimerkki

Asetettiin erilaisia size-avainsanoja reuna-gradienteille:

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

Kokeile itse

Toistuva radiaalinen gradientti

repeating-radial-gradient() Funktiot toistuvaan radiaaliseen gradienttiin:

Esimerkki

Toistuva radiaalinen gradientti:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Kokeile itse

CSS-gradisointiominaisuudet

Seuraavassa taulukossa luetellaan CSS-gradisointiominaisuudet:

Ominaisuus Kuvaus
background-image Asetetaan yksi tai useampi taustakuva elementille.