CSS funktioviittausopas
- Edellinen sivu CSS tekoelementit
- Seuraava sivu CSS animaatioon liittyvät ominaisuudet
CSS-funktiot
CSS-funktiot voidaan käyttää arvojen laskemiseen, merkkijonon käsittelyyn tai väreihin, monimutkaisten gradienttien ja muotojen luomiseen jne.
CSS-funktiot käytetään yleensä erilaisten CSS-ominaisuuksien arvojen määrittämiseen.
Funktio | Kuvaus |
---|---|
acos() | Palauttaa arvon arccos välillä -1 ja 1. |
asin() | Palauttaa arvon arcsin välillä -1 ja 1. |
atan() | Palauttaa arvon arctangentin arvon välillä -∞ ja ∞. |
atan2() | Palauttaa kahden arvon arctangentin arvon välillä -∞ ja ∞. |
attr() | Palauttaa valitun elementin ominaisuuden arvon. |
blur() | Käyttää hämärtymisefektiä elementissä. |
brightness() | Säätää elementin kirkkautta (valoisampi tai tummempi). |
calc() | Sallii laskutoimitusten suorittamisen CSS-ominaisuuksien arvojen määrittämiseksi. |
circle() | Määrittelee ympyrän. |
clamp() | Asettaa arvon, joka säätää arvoa näkymän kokoonpanon mukaan pienimmästä ja suurimmasta arvosta. |
color() | Sallii väriavaruuden määrittämisen tietystä määritetystä väriavaruudesta. |
color-mix() | Sekoittaa kaksi väriarvoa annetussa väriavaruudessa annetun suhteen. |
conic-gradient() | Luo silmukan gradientin. |
contrast() | Säätää elementin kontrastia. |
cos() | Palauttaa kulman kosinussiiven. |
counter() | Palauttaa nimetyn laskurin nykyisen arvon. |
counters() | Palauttaa nimetyn ja sisennetyn laskurin nykyisen arvon. |
cubic-bezier() | Määrittelee kolmiosaisen Bezier-kurvan. |
drop-shadow() | Käyttää projektioefektiä kuvassa. |
ellipse() | Määrittelee elipallo. |
exp() | Palauttaa E:n määritetyn potenssin x.x) |
fit-content() | Sallii elementin kokoonpanon säätämisen sisällön mukaan. |
grayscale() | Muuntaa kuvan harmaasävyksi. |
hsl() / hsla() | Määrittelee väriä HSL (hävittymä-satvuus-valoisuus) -mallin avulla; vaihtoehtoisesti sisältää alpha-komponentin. |
hue-rotate() | Sovittaa elementtiin värikierteen. |
hwb() | Määrittelee väriä HSB (hävittymä-satvuus-valoisuus) -mallin avulla; vaihtoehtoisesti sisältää alpha-komponentin. |
hypot() | Palauttaa sen parametrien neliösumman neliöjuuren. |
inset() | Määrittelee reunan etäisyyden referenssiruudusta, joka säilyttää määritetyn sisäisen etäisyyden jokaiselle reunalle. |
invert() | Kääntää kuvan värit. |
lab() | Määrittelee CIE Lab -väriavaruudessa väriä. |
lch() | Määrittelee LCH (valoisaisuus-kromatointi-häivitys) -väriavaruudessa väriä. |
light-dark() | Käyttää kahta väriarvoa asetettuun valon tai tumman teemaan; jos käyttäjä on asettanut vaalean teeman, palauttaa ensimmäisen arvon; Palauttaa toisen arvon, jos käyttäjä on asettanut tumman teeman. |
linear-gradient() | Luo suoran pehmennyksen. |
log() | Palauttaa määritetyn luvun luonnollisen logaritmin (E:n perusteella) tai määritetyn pohjan logaritmin. |
matrix() | Määrittelee 2D-transformaation kuusiluku-matriisin avulla. |
matrix3d() | Määrittelee 3D-transformaation 4x4-matriisin avulla. |
max() | Käyttää pilkulla erotettua arvojen listaa attribuutin arvona. |
min() | Käyttää pilkulla erotettua arvojen listaa attribuutin arvona. |
minmax() | Määrittelee suuruuden alueen, joka on suurempi tai yhtä suuri kuin vähimmäisarvo ja pienempi tai yhtä pieni kuin enimmäisarvo (CSS-verkkoon käytettävä). |
mod() | Palauttaa luvun jakojäännön toisen luvun jakamisen jälkeen. |
oklab() | Määrittelee OKLAB-väriavaruudessa väriä. |
oklch() | Määrittelee OKLCH-väriavaruudessa väriä. |
opacity() | Sovittaa elementtiin läpinäkyvyysefektiä. |
perspective() | Määrittelee 3D-transformaatioelementin perspektiivin. |
polygon() | Määrittelee polygonin. |
pow() | Palauttaa luvun (x) luvun (y) potenssin. |
radial-gradient() | Luo säteellisen pehmennyksen. |
ray() | Määrittelee animaatioelementin noudattaman siirtymäpolun osan. |
rem() | Palauttaa luvun jakojäännön toisen luvun jakamisen jälkeen. |
repeat() | Toistuva sarake- tai rivijoukko verkossa. |
repeating-conic-gradient() | Toistuva kulmpehmennys. |
repeating-linear-gradient() | Toistuva suora pehmennys. |
repeating-radial-gradient() | Toistuva säteellinen pehmennys. |
rgb() / rgba() | Määrittelee värin puna-vihreä-sininen (RGB) mallin avulla; valinnainen alpha-komponentti sisältyy. |
rotate() | Määrittelee elementin 2D-kiertokulman. |
rotate3d() | Määrittelee elementin 3D-kiertokulman. |
rotateX() | Määrittelee elementin 3D-kiertokulman x-akselin (tasasuuntaan) suuntaan. |
rotateY() | Määrittelee elementin 3D-kiertokulman y-akselin (pystysuuntaan) suuntaan. |
rotateZ() | Määrittelee elementin 3D-kiertokulman z-akselin suuntaan. |
round() | Pyöristää lukuja määritellyllä pyöristysstrategialla. |
saturate() | Säätää elementin kirkkauden (väriintensiteetti). |
scale() | Määrittelee elementin 2D-skaalauksen. |
scale3d() | Määrittelee elementin 3D-skaalauksen. |
scaleX() | Horisontaalisesti skaalaa elementtiä (leveys). |
scaleY() | Pystysuuntaisesti skaalaa elementtiä (korkeus). |
sepia() | Muuntaa kuvan sepia-tyyliin. |
sin() | Palauttaa luvun (kulman) sinusarvan arvon. |
skew() | Kallistaa elementtiä x- ja y-akselin suuntaan. |
skewX() | Kallistaa elementtiä x-akselin suuntaan. |
skewY() | Kallistaa elementtiä y-akselin suuntaan. |
sqrt() | Palauttaa luvun neliöjuuren. |
steps() | Luo animaatiolle askelajan aikafunktio. |
tan() | Palauttaa luvun tangentin arvon. |
translate() | Mahdollistaa elementin uudelleenlokalisointi x- ja y-akselin suuntaan. |
translateX() | Mahdollistaa elementin uudelleenlokalisointi x-akselin suuntaan. |
translateY() | Mahdollistaa elementin uudelleenlokalisointi y-akselin suuntaan. |
url() | Mahdollistaa tiedoston sisällyttäminen tyyleihin. |
var() | Syötä mukautetun ominaisuuden arvo. |
- Edellinen sivu CSS tekoelementit
- Seuraava sivu CSS animaatioon liittyvät ominaisuudet