Podręcznik referencyjny funkcji CSS

CSS funkcje

CSS funkcje mogą być używane do obliczeń wartości, operacji na ciągach lub kolorach, tworzenia złożonych gradientów i kształtów itp.

CSS funkcje są często używane jako wartości różnych atrybutów CSS.

Funkcja Opis
acos() Zwraca wartość arcus cosinus liczby między -1 a 1.
asin() Zwraca wartość arsinusu liczby między -1 a 1.
atan() Zwraca wartość arctangensu liczby między -∞ a ∞.
atan2() Zwraca wartość arctangensu dwóch wartości między -∞ a ∞.
attr() Zwraca wartość atrybutu wybranego elementu.
blur() Zastosuj efekt rozmycia do elementu.
brightness() Dostosuj jasność elementu (jaśniej lub ciemniej).
calc() Pozwala na obliczenia w celu określenia wartości atrybutu CSS.
circle() Definiuje okrąg.
clamp() Ustaw wartość, która będzie dostosowywana między wartością minimalną a maksymalną w zależności od rozmiaru viewport.
color() Pozwala指定特定颜色空间中的颜色。
color-mix() W określonej przestrzeni kolorów, mieszaj dwie wartości kolorów w określonym proporcji.
conic-gradient() Utwórz gradient w kształcie trójkąta.
contrast() Dostosuj kontrast elementu.
cos() Zwraca wartość kosinusa kąta.
counter() Zwraca bieżącą wartość licznika o nazwie.
counters() Zwraca bieżącą wartość licznika o nazwie i zagnieżdżenia.
cubic-bezier() Definiuje trójstopniową krzywą Béziera.
drop-shadow() Zastosuj efekt projekcji do obrazu.
ellipse() Definiuje elipsę.
exp() Zwraca E do określonej liczby x potęgi (Ex)
fit-content() Pozwala dostosować rozmiar elementu do jego zawartości.
grayscale() konwertuje obraz na odcienie szarości.
hsl() / hsla() definiuje kolor za pomocą modelu koloru Hue-Saturation-Lightness (HSL); opcjonalnie zawiera komponent alpha.
hue-rotate() apply color rotation to the element.
hwb() definiuje kolor za pomocą modelu koloru Hue-Whiteness-Blackness (HWB); opcjonalnie zawiera komponent alpha.
hypot() zwraca pierwiastek kwadratowy sumy kwadratów parametrów.
inset() definiuje prostokąt z określonym wewnętrznym odległościem od każdej strony ramki odniesienia.
invert() odwraca kolory obrazu.
lab() specifies color in the CIE Lab color space.
lch() specifies color in the LCH (brightness-hue-chroma) color space.
light-dark() umożliwia ustawienie dwóch wartości kolorów, jeśli użytkownik ustawił jasny temat, zwraca pierwszą wartość;
zwraca drugą wartość, jeśli użytkownik ustawił ciemny temat.
linear-gradient() tworzy gradienty liniowe.
log() zwraca naturalny logarytm liczby (pod podstawą E) lub logarytm liczby pod指定ной основой.
matrix() definiuje transformację 2D za pomocą macierzy sześciowartościowej.
matrix3d() definiuje transformację 3D za pomocą macierzy 4x4.
max() używa maksymalnej wartości z listy wartości rozdzielonych przecinkami jako wartość atrybutu.
min() używa minimalnej wartości z listy wartości rozdzielonych przecinkami jako wartość atrybutu.
minmax() definiuje zakres rozmiaru, który jest większy lub równy minimalnej wartości i mniejszy lub równy maksymalnej wartości (używane w CSS grid).
mod() zwraca resztę z dzielenia liczby przez inną liczbę.
oklab() specifies color in the OKLAB color space.
oklch() specifies color in the OKLCH color space.
opacity() apply effect of opacity to the element.
perspective() definiuje perspektywę widzenia dla elementów 3D.
polygon() definiuje wielokąt.
pow() zwraca wartość liczby (x) podniesionej do potęgi (y).
radial-gradient() tworzy gradienty radialne.
ray() definiuje odcinek ścieżki offsetu, którą powinien śledzić element animacji.
rem() zwraca resztę z dzielenia liczby przez inną liczbę.
repeat() powtarzająca się grupa kolumn lub wierszy w sieci.
repeating-conic-gradient() powtarzająca się gradienty konikowe.
repeating-linear-gradient() powtarzająca się gradienty liniowe.
repeating-radial-gradient() powtarzająca się gradienty radialne.
rgb() / rgba() Definiuje kolor za pomocą modelu RGB (czerwony-zielony-niebieski); opcjonalnie można dodać komponent alpha.
rotate() Definiuje 2D obrót elementu.
rotate3d() Definiuje 3D obrót elementu.
rotateX() Definiuje 3D obrót elementu wokół osi x (poziomej).
rotateY() Definiuje 3D obrót elementu wokół osi y (pionowej).
rotateZ() Definiuje 3D obrót elementu wokół osi z.
round() Określa, jak liczby są zaokrąglane zgodnie z określonym strategią zaokrąglania.
saturate() Dostosowuje nasycenie elementu (silność koloru).
scale() Definiuje 2D skalowanie elementu.
scale3d() Definiuje 3D skalowanie elementu.
scaleX() Poziomo skaluje element (szerokość).
scaleY() Wertykalnie skaluje element (wysokość).
sepia() Konwertuje obraz na odcień brązowy.
sin() Zwraca wartość sinus liczby (kata) w stopniach.
skew() Przechyla element wzdłuż osi x i y.
skewX() Przechyla element wzdłuż osi x.
skewY() Przechyla element wzdłuż osi y.
sqrt() Zwraca wartość pierwiastka kwadratowego liczby.
steps() Tworzy funkcję krokową dla animacji.
tan() Zwraca wartość tangensu liczby.
translate() Pozwala na ponowne umieszczenie elementu wzdłuż osi x i y.
translateX() Pozwala na ponowne umieszczenie elementu wzdłuż osi x.
translateY() Pozwala na ponowne umieszczenie elementu wzdłuż osi y.
url() Pozwala na włączenie plików do arkusza stylów.
var() Wprowadź wartość wstawionego atrybutu.