CSS Functional Notation - CSS: Cascading Style Sheets 编辑

CSS functional notation is a type of CSS value that can represent more complex data types or invoke special data processing or calculations.

Syntax

selector {
  property: functional-notation( [argument]? [, argument]! );
}

The syntax starts with the name of the functional notation, followed by a left parenthesis (. Next up are the notation argument(s), and the function is finished off with a closing parenthesis ).

Functions can take multiple arguments, which are formatted similarly to CSS property values. Whitespace is allowed, but they are optional inside the parentheses. In some functional notations multiple arguments are separated by commas, while others use spaces.

Index

Functional notation defined by a set of CSS specifications includes the following:

A

• abs() (math)
• acos() (math)
• annotation() (font)
• asin() (math)
• atan() (math)
• atan2() (math)
• attr() (math)

B

• blur() (filter)
• brightness() (filter)

C

• calc() (math)
• character-variant() (font)
• circle() (shape)
• clamp() (math)
• color() (colors)
• conic-gradient()
• cos() (math)
• counter()
• counters()
• contrast() (filter)
• cross-fade()
• cubic-bezier()

D

• device-cmyk() (colors)
• drop-shadow() (filter)

E

• element()
• env()
• ellipse() (shape)
• exp() (math)

F

• fit-content()
• format()

G

• grayscale() (filter)

H

• hsl() (colors)
• hsla() (colors)
• hue-rotate() (filter)
• hwb() (colors)
• hypot() (math)

I

• image()
• image-set()
• inset() (shape)
• invert() (filter)

L

• lab() (colors)
• lch() (colors)
• leader()
• linear-gradient()
• local()
• log() (math)

M

• matrix() (transform)
• matrix3d() (transform)
• max() (math)
• min() (math)
• minmax() (math)
• mod() (math)

O

• opacity() (filter)
• ornaments() (font)

P

• paint()
• path() (shape)
• perspective() (transform)
• polygon() (shape)
• pow() (math)

R

• radial-gradient()
• rem() (math)
• repeat()
• repeating-linear-gradient()
• repeating-radial-gradient()
• repeating-conic-gradient()
• rgb() (colors)
• rgba() (colors)
• rotate() (transform)
• rotate3d() (transform)
• rotateX() (transform)
• rotateY() (transform)
• rotateZ() (transform)
• round() (math)

S

• saturate() (filter)
• scale() (transform)
• scale3d() (transform)
• scaleX() (transform)
• scaleY() (transform)
• scaleZ() (transform)
• sepia() (filter)
• sign() (math)
• sin() (math)
• skew() (transform)
• skewX() (transform)
• skewY() (transform)
• sqrt() (math)
• steps()
• styleset() (font)
• stylistic() (font)
• swash() (font)
• symbols()

T

• tan() (math)
• target-counter()
• target-counters()
• target-text()
• toggle()
• translate() (transform)
• translate3d() (transform)
• translateX() (transform)
• translateY() (transform)
• translateZ() (transform)

U

• url()

V

• var()

Specifications

See also

• CSS Values and Units
• Introduction to CSS: Values and Units