CSS function reference manual

CSS-funktioner

CSS-funktioner kan användas för att beräkna värden, manipulera strängar eller färger, skapa komplexa toner och former osv.

CSS-funktioner används ofta som värden för olika CSS-attribut.

Funktion Beskrivning
acos() Returnera arccosvärdet för ett tal mellan -1 och 1.
asin() Returnera arcsinvärdet för ett tal mellan -1 och 1.
atan() Returnera arctangentvärdet för ett tal mellan -∞ och ∞.
atan2() Returnera arctangentvärdet för två värden mellan -∞ och ∞.
attr() Returnera attributvärdet för det valda elementet.
blur() Applicera en suddig effekt på elementet.
brightness() Justera ljushet för elementet (mer eller mindre ljus).
calc() Tillåter beräkningar för att bestämma CSS-attributvärden.
circle() Definiera en cirkel.
clamp() Ställ in ett värde som justeras mellan minsta och största värdet baserat på viewport-storleken.
color() Tillåter att specificera en färg i en specifik färgutrymme.
color-mix() Blanda två färgvärden i given färgutrymme i given proportion.
conic-gradient() Skapa en konisk gradient.
contrast() Justera kontrasten för elementet.
cos() Returnerar cosinusvärdet för vinkeln.
counter() Returnerar den aktuella värdet för den namngivna counter.
counters() Returnerar den aktuella värdet för den namngivna och nästlade counter.
cubic-bezier() Definiera en tredjegradig Bezier-kurva.
drop-shadow() Applicera en projektions effekt på bilden.
ellipse() Definiera en ellips.
exp() Returnerar E:s specifika power x gånger (Ex)
fit-content() Tillåter justering av elementets storlek baserat på innehållet.
grayscale() Konvertera bilden till gråskala.
hsl() / hsla() Definiera en färg med hjälp av ett färgskalan-saturation-brightnessmodell (HSL); valfritt inkludera alpha-komponenten.
hue-rotate() Tillämpa en färgrotation på elementet.
hwb() Definiera en färg med hjälp av ett färgskalan-blekhet-mörkhetmodell (HWB); valfritt inkludera alpha-komponenten.
hypot() Returnera kvadratroten av summan av kvadraten av dess parametrar.
inset() Definiera en rektangel som håller en specifik inbäddad avstånd från varje sida av referensramen.
invert() Invertera färgerna på bilden.
lab() Specificera en färg i CIE Lab-färgutrymmet.
lch() Specificera en färg i LCH-färgutrymmet (ljusdetskar-nyans-hål).
light-dark() Aktivera två färgvärdesinställningar, returnera det första värdet om användaren har ställt in en ljus temastil;
Returnera den andra värdet om användaren har ställt in en mörk temastil.
linear-gradient() Skapa en linjärgradient.
log() Returnerar den naturliga logaritmen av ett tal (med E som bas) eller logaritmen av ett tal med en specifik bas.
matrix() Definiera en 2D-transform med hjälp av en sexvärdesmatris.
matrix3d() Definiera en 3D-transform med hjälp av en 4x4-matris.
max() Använd största värdet från en kommaseparerad värde lista som egenskapsvärde.
min() Använd minsta värdet från en kommaseparerad värde lista som egenskapsvärde.
minmax() Definiera en storleksintervall som är större än eller lika med minsta värdet och mindre än eller lika med maxima värdet (för CSS-grid).
mod() Returnerar resten av divisionen av ett tal med ett annat tal.
oklab() Specificera en färg i OKLAB-färgutrymmet.
oklch() Specificera en färg i OKLCH-färgutrymmet.
opacity() Tillämpa en opacitetseffekt på elementet.
perspective() Definiera en perspektivvy för 3D-transformelement.
polygon() Definiera en polygon.
pow() Returnerar värdet av ett tal (x) upphöjt till en annan tal (y) power.
radial-gradient() Skapa en radialgradient.
ray() Definiera den avvikande banan som animationselementet bör följa.
rem() Returnerar resten av divisionen av ett tal med ett annat tal.
repeat() Upprepa ett sätt av kolumner eller rader i en rutnät.
repeating-conic-gradient() Repetition av koniskgradient.
repeating-linear-gradient() Repetition av linjärgradient.
repeating-radial-gradient() Repetition av radialgradient.
rgb() / rgba() Definiera färgen med hjälp av röd-grön-blå-modellen (RGB); valfritt inkluderar alpha-komponenten.
rotate() Definiera elementets 2D-rotation.
rotate3d() Definiera elementets 3D-rotation.
rotateX() Definiera elementets 3D-rotation runt x-axeln (horisontell).
rotateY() Definiera elementets 3D-rotation runt y-axeln (vertikal).
rotateZ() Definiera elementets 3D-rotation runt z-axeln.
round() Rundar av ett tal enligt den angivna avrundningsstrategin.
saturate() Justera elementets saturation (färgstyrka).
scale() Definiera elementets 2D-skala.
scale3d() Definiera elementets 3D-skala.
scaleX() Horisontellt skalera elementet (bredd).
scaleY() Vertikalt skalera elementet (höjd).
sepia() Konverterar bilden till sepia.
sin() Returnerar sinusvärdet till ett tal (vinkel).
skew() Inklina element längs x- och y-axeln.
skewX() Inklina element längs x-axeln.
skewY() Inklina element längs y-axeln.
sqrt() Returnerar kvadratroten till ett tal.
steps() Skapar en steg-funktion för animationer.
tan() Returnerar tangenten till ett tal.
translate() Tillåter att elementen omplaceras längs x- och y-axeln.
translateX() Tillåter att elementen omplaceras längs x-axeln.
translateY() Tillåter att elementen omplaceras längs y-axeln.
url() Tillåter att filer inkluderas i stiltabellen.
var() Infoga värdet för en anpassad egenskap.