CSS Functie Referentiemanual

CSS-functies

CSS-functies kunnen gebruikt worden om waarden te berekenen, strings te manipuleren of kleuren, complexe verlopen en vormen te maken, enz.

CSS-functies worden meestal gebruikt als waarden voor verschillende CSS-eigenschappen.

Functie Beschrijving
acos() Geef de arccosinus van het getal tussen -1 en 1 terug.
asin() Geef de arctangent van het getal tussen -1 en 1 terug.
atan() Geef de arctangent van het getal tussen -∞ en ∞ terug.
atan2() Geef de arctangent van de twee waarden tussen -∞ en ∞ terug.
attr() Geef de waarde van de eigenschap van het geselecteerde element terug.
blur() Gebruik een vaagheids-effect op het element.
brightness() Pas de helderheid van het element aan (helderder of donkerder).
calc() Laat toestaan dat berekend wordt om de waarde van een CSS-eigenschap te bepalen.
circle() Definieer een cirkel.
clamp() Stel een waarde in die tussen de minimum- en maximumwaarden varieert op basis van de viewport-grootte.
color() Laat toe om een kleur te specificeren in een specifieke kleurspace.
color-mix() Meng twee kleurwaarden in de gegeven kleurspace op de gegeven verhouding.
conic-gradient() Maak een kegelvormige verloop.
contrast() Pas de contrastverhouding van het element aan.
cos() Geef de cosinuswaarde van het hoek getal terug.
counter() Geef de huidige waarde van de genaamde teller terug.
counters() Geef de huidige waarde van de genaamde en genestelde teller terug.
cubic-bezier() Definieer een cubische Bezier-kromming.
drop-shadow() Gebruik een projectie-effect op het beeld.
ellipse() Definieer een ellips.
exp() Geef de x-ee macht van E (Ex)
fit-content() Laat toe om de grootte van elementen aan te passen op basis van de inhoud.
grayscale() Convert the image to grayscale.
hsl() / hsla() Define a color using the hue-saturation-lightness model (HSL); optionally include the alpha component.
hue-rotate() Apply a color rotation to the element.
hwb() Define a color using the hue-whiteness-blackness model (HWB); optionally include the alpha component.
hypot() Return the square root of the sum of the squares of its parameters.
inset() Define a rectangle that maintains a specified inner margin distance from each side of the reference frame.
invert() Invert the colors of the image.
lab() Specify a color in the CIE Lab color space.
lch() Specify a color in the LCH (luminance-chroma-hue) color space.
light-dark() Enable two color value settings, return the first value if the user has set a light theme;
Return the second value if the user has set a dark theme.
linear-gradient() Create a linear gradient.
log() Return the natural logarithm (base E) of a specified number, or the logarithm of a specified base.
matrix() Define a 2D transformation using a six-value matrix.
matrix3d() Define a 3D transformation using a 4x4 matrix.
max() Use the maximum value from a comma-separated list of values as the attribute value.
min() Use the minimum value from a comma-separated list of values as the attribute value.
minmax() Define a size range between a minimum and maximum value (used for CSS grid).
mod() Return the remainder of a number divided by another number.
oklab() Specify a color in the OKLAB color space.
oklch() Specify a color in the OKLCH color space.
opacity() Apply an opacity effect to the element.
perspective() Define the perspective view for 3D transformation elements.
polygon() Define a polygon.
pow() Return the value of a number (x) raised to the power of another number (y).
radial-gradient() Create a radial gradient.
ray() Define the offset path segment that the animation element should follow.
rem() Return the remainder of a number divided by another number.
repeat() Repeat a set of columns or rows in a grid.
repeating-conic-gradient() Repeated conic gradient.
repeating-linear-gradient() Repeated linear gradient.
repeating-radial-gradient() Repeated radial gradient.
rgb() / rgba() Gebruik het rood-groen-blauw model (RGB) om kleuren te definiëren; optioneel kan de alpha-component worden opgenomen.
rotate() Definieer de 2D-rotatie van het element.
rotate3d() Definieer de 3D-rotatie van het element.
rotateX() Definieer de 3D-rotatie van het element om de x-as (horizontaal).
rotateY() Definieer de 3D-rotatie van het element om de y-as (verticaal).
rotateZ() Definieer de 3D-rotatie van het element om de z-as.
round() Ronde de getallen af volgens de opgegeven afrondingsstrategie.
saturate() Passende de verzadiging van het element (kleursterkte) aan.
scale() Definieer de 2D-schaal van het element.
scale3d() Definieer de 3D-schaal van het element.
scaleX() Verander de elementen in horizontale schaal (breedte).
scaleY() Verander de elementen in verticale schaal (hoogte).
sepia() Verander het beeld in sepia-tint.
sin() Geef de sinuswaarde van een getal (hoek) terug.
skew() Elementen schuiven langs de x- en y-as.
skewX() Elementen schuiven langs de x-as.
skewY() Elementen schuiven langs de y-as.
sqrt() Geef de kwadrantswortel van een getal terug.
steps() Maak een stap计时函数为动画创建。
tan() Geef de tangenswaarde van een getal terug.
translate() Staat toe om elementen langs de x- en y-as te herpositioneren.
translateX() Staat toe om elementen langs de x-as te herpositioneren.
translateY() Staat toe om elementen langs de y-as te herpositioneren.
url() Staat toe om bestanden in de stijltafel op te nemen.
var() Voeg de waarde van een aangepaste eigenschap in.