CSS
Funkcje

Składnia

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Uwagi

funkcja calc ()

Akceptuje wyrażenie matematyczne i zwraca wartość liczbową.

Jest to szczególnie przydatne podczas pracy z różnymi typami jednostek (np. Odejmowanie wartości px od wartości procentowej) w celu obliczenia wartości atrybutu.

Można używać wszystkich operatorów + , - , / i * , aw razie potrzeby można dodać nawiasy, aby określić kolejność operacji.

Użyj funkcji calc() aby obliczyć szerokość elementu div:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

Użyj calc() aby określić pozycję obrazu tła:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Użyj calc() aby określić wysokość elementu:

height: calc(100% - 20px);

funkcja attr ()

Zwraca wartość atrybutu wybranego elementu.

Poniżej znajduje się element blokowy zawierający znak wewnątrz atrybutu data-* którego CSS może użyć (np. Wewnątrz pseudoelementu ::before i ::after ) za pomocą tej funkcji.

<blockquote data-mark='"'></blockquote>

W poniższym bloku CSS znak jest dołączany przed i po tekście wewnątrz elementu:

blockquote[data-mark]::before,
blockquote[data-mark]::after {
    content: attr(data-mark);
}

funkcja gradientu liniowego ()

Tworzy obraz przedstawiający liniowy gradient kolorów.

linear-gradient( 0deg, red, yellow 50%, blue);

Tworzy to gradient od dołu do góry, z kolorami zaczynającymi się na czerwono, następnie żółtymi na 50%, a kończącymi na niebieskim.

funkcja gradientu radialnego ()

Tworzy obraz przedstawiający gradient kolorów promieniujący od środka gradientu

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

funkcja var ()

Funkcja var () umożliwia dostęp do zmiennych CSS.

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

Ta funkcja jest obecnie w fazie rozwoju. Sprawdź caniuse.com, aby uzyskać najnowszą obsługę przeglądarki.