Css 简明教程

CSS - Value Functions

CSS value functions 允许您动态生成 CSS 属性值。这些函数接受参数并返回一个值，该值可以代替静态值使用。

CSS value functions allow you to generate values for CSS properties dynamically. These functions take parameters and return a value that can be used in place of a static value.

Syntax

selector {
   property: function([argument]? [, argument]!);
}

The function name appears first in the value syntax, followed by a opening parenthesis (. The argument(s) come next, and a closing parenthesis ) completes the function.
Multiple parameters are accepted by functions, and their formatting is the same as that of CSS property values.
Though optional, whitespace is permitted inside parenthesis. Multiple arguments are separated by commas in certain functional notations and by spaces in others.

Transform Functions

CSS 数据类型称为 <transform-function> 代表视觉转换，并用作 transform 属性中的值。

The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property.

Translate Functions

下表列出了转换函数：

Following table lists translate functions:

Functions

Description

translateX()

Translates an element horizontally.

translateY()

Translates an element veritcally.

translateZ()

Translates an element along the z-axis.

translate()

Translates an element on the 2D plane.

translate3d()

Translates an element in 3D space.

Rotation Functions

下表列出了旋转函数：

Following table lists rotation functions:

Functions

Description

rotateX()

Rotates an element around the horizontal axis.

rotateY()

Rotates an element around the vertical axis.

rotateZ()

Rotates an element around the z-axis.

rotate()

Rotates an element around a fixed point on the 2D plane.

rotate3d()

Rotates an element around a fixed axis in 3D space.

Scaling Functions

下表列出了缩放函数：

Following table lists scaling functions:

Functions

Description

scaleX()

Scales an element up or down horizontally.

scaleY()

Scales an element up or down vertically.

scaleZ()

Scales an element up or down along the z-axis.

scale()

Scales an element up or down on the 2D plane.

scale3d()

Scales an element up or down in 3D space.

Skew Functions

下表列出了偏移函数：

Following table lists skew functions:

Functions

Description

skewX()

Skews an element in the horizontal direction.

skewY()

Skews an element in the vertical direction.

skew()

Skews an element on the 2D plane.

Matrix Functions

下表列出了矩阵函数：

Following table lists matrix functions:

Functions

Description

matrix()

Describes a homogeneous 2D transformation matrix.

matrix3d()

Describes a 3D transformation as a 4×4 homogeneous matrix.

Perspective Functions

下表列出了透视函数：

Following table lists perspective functions:

Functions

Description

perspective()

Sets the distance between the user and the z=0 plane.

Math Functions

数学表达式可以在 CSS 中使用数学函数表示数值。

Mathematical expressions can be used in CSS to represent numeric values using math functions.

Basic Arithmetic Functions

下表列出了基本算术函数：

Following table lists basic arithmetic functions:

Function

Description

calc()

Performs basic arithmetic calculations on numerical values.

Comparision Functions

下表列出了比较函数：

Following table lists comparision functions:

Function

Description

min()

Determines the minimum value from a given set of values.

max()

Determines the maximum value from a given list of values.

clamp()

Calculates the central of a minimum, central, and maximum values.

Stepped Value Functions

下表列出了阶跃值函数：

Following table lists stepped value functions:

Function

Description

round()

Calculates a rounded number based on a rounding strategy.

Trignometric Functions

下表列出了三角函数：

Following table lists trignometric functions:

Function

Description

sin()

Calculates the trigonometric sine of a number.

cos()

Calculates the trigonometric cosine of a number

tan()

Calculates the trigonometric tangent of a number.

asin()

Calculates the trigonometric inverse sine of a number.

acos()

Calculates the trigonometric inverse cosine of a number.

atan()

Calculates the trigonometric inverse tangent of a number.

atan2()

Calculates the trigonometric inverse tangent of two-numbers in a plane.

Filter Functions

CSS 数据类型 <filter-function> 表示一种能够改变输入图像外观的图形效果。它在 filter 和 backdrop-filter 属性中使用。

The CSS data type <filter-function> denotes a graphical effect capable of changing the look of an input image. It’s used within the filter and backdrop-filter properties.

Function

Description

blur()

Increases the image gaussian blur.

brightness()

Brightens or darkens an image..

contrast()

Increases or decreases the image contrast.

drop-shadow()

Applies a drop shadow behind an image.

grayscale()

Converts an image to grayscale.

hue-rotate()

Changes the overall hue of an image.

invert()

Inverts the colors of an image.

opacity()

Adds transparency to an image.

saturate()

Changes the overall saturation of an image.

sepia()

Increases the sepia of an image.

Color Functions

CSS 数据类型 <color> 定义了表示颜色不同方法。

The CSS data type <color> defines various ways to represent colors.

Function

Description

rgb()

Specifies a given color according to its red, green, blue and alpha (transparency) components.

hsl()

Specifies a given color according to its hue, saturation, lightness and alpha (transparency) components.

hwb()

Specifies a given color according to its hue, whiteness and blackness components.

lch()

Specifies a given color according to its lightness, chroma and hue components.

oklch()

Specifies a given color according to its lightness, chroma, hue and alpha (transparency) components.

lab()

Specifies a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace.

oklab()

Specifies a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency).

color()

Specifies a particular, specified colorspace rather than the implicit sRGB colorspace

color-mix()

Mixes two color values in a given colorspace by a given amount.

Image Functions

CSS 数据类型 <image> 提供图像或渐变的图形表示形式。

The CSS data type <image> offers graphical representations of images or gradients.

Gradient Functions

下表列出了渐变函数：

Following table lists gradient functions:

Function

Description

linear-gradient()

Linear gradients transition colors progressively along an imaginary line.

radial-gradient()

Radial gradients transition colors progressively from a center point (origin).

conic-gradient()

Conic gradients transition colors progressively around a circle.

repeating-linear-gradient()

Is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

repeating-radial-gradient()

Is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

repeating-conic-gradient()

Is similar to conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

Image Functions

下表列出了图像函数：

Following table lists image functions:

Function

Description

image-set()

Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.

cross-fade()

Blends two or more images at a defined transparency.

paint()

Defines an <image> value generated with a PaintWorklet.

Counter Functions

理论上 CSS 计数器函数可以在一个 <string> 可用的任何地方使用，然而他们通常与内容属性一起使用。

CSS counter functions can theoretically be used anywhere a <string> is available, however they are typically used in conjunction with the content property.

Function

Description

counter()

Returns a string representing the current value of the named counter if there is one.

counters()

Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

Shape Functions

CSS 数据类型 <basic-shape> 表示一个视觉形状，并用于 clip-path 、 offset-path 和 shape-outside 这样的属性。

The CSS data type <basic-shape> signifies a visual shape and is employed in properties such as clip-path, offset-path, and shape-outside.

Function

Description

circle()

Defines a circle shape.

ellipse()

Defines an ellipse shape.

inset()

Defines an inset rectangle shape.

polygon()

Defines a polygon shape.

path()

Accepts an SVG path string to enable a shape to be drawn.

Reference Functions

为了引用一个在别处定义的值，以下函数被用作属性值。

In order to reference a value defined elsewhere, the following functions are used as a value of properties.

Function

Description

attr()

Uses the attributes defined on HTML element.

env()

Uses the user-agent defined as environment variable.

url()

Uses a file from the specified URL.

var()

Uses the custom property value instead of any part of a value of another property.

Grid Functions

以下函数用于定义一个 CSS 网格。

The following functions are used to define a CSS Grid.

Function

Description

fit-content()

Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).

minmax()

Defines a size range greater-than or equal-to min and less-than or equal-to max.

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern.

Font Functions

替换字体字形的使用由 CSS 字体函数与 font-variant-alternates 属性组合管理。

Alternate glyph usage is managed through the use of CSS font functions in combination with the font-variant-alternates property.

Function

Description

stylistic()

This function activates stylistic alternates for certain characters using a font-specific name associated with a number.

styleset()

This function activates stylistic alternatives for groups of characters. The parameter is a font-specific name associated with a number, such as ss02.

character-variant()

This function allows distinct stylistic variations for individual characters, unlike styleset(), which creates coherent glyphs for a character set.

swash()

This function activates swash glyphs with a font-specific name associated with a number, e.g. swsh 2 and cswh 2.

ornaments()

This function activates ornaments such as fleurons and dingbat glyphs using a font-specific name associated with a number, such as ornm 2.

annotation()

This function allows annotations such as circled digits or inverted characters using a font-specific name associated with a number, for example, nalt 2

Easing Functions

转换和动画属性的值来自以下函数。

The values for transition and animation properties come from the following functions.

Function

Description

linear()

Easing function that interpolates linearly between its points..

cubic-bezier()

Easing function that defines a cubic Bézier curve.

steps()

Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time.