简单认识 CSS 中的函数

• var()

  • 使用 CSS 变量

• calc()

  • 执行数学计算。注意使用 0px 而不是 0
  • calc(0 - 1px) ❌
  • calc(0px - 1px) ✅

• attr()

  • 能够获取标签中的自定义属性值。
  • 比如在标签中定义 data-my="hello" 时，可以通过 attr(data-my) 得到值 hello

• url()

  • 获取链接中的资源

• repeat()

  • 通常用于 grid 布局中，比如 grid-template-columns: repeat(3, 1fr)

• minmax()

  • 通常用于 grid 布局中，用于指定一个值的范围，表示一个最小值和一个最大值

• max()

  • 选取其中最大值

• min()

  • 选取其中最小值

• env()

  • 获取用户代理（User Agent）的环境变量，并将其用作 CSS 属性的值。它通常用于响应式设计中，根据浏览器窗口大小动态调整样式。

• counter()

  • 用于在 CSS 中生成一个计数器的值，并将其用作 CSS 属性的值。它通常用于列表编号。

• counters()

  • 类似于 counter() 函数，但它可以嵌套在多个元素中，并按照给定的分隔符连接它们。

• fit-content()

  • 通常用于 grid 和 flex 布局中，设置一个元素的尺寸，使其适应其内容的大小。

• clamp()

  • 指定一个值的范围，并在给定的最小值和最大值之间进行插值。这使得可以在 CSS 中创建响应式设计，根据视口大小动态调整样式。

• path()

  • 接收一个 SVG 路径字符串。

其他一些新特定、不常用的函数

asin() 23年新特性 (chrome 111)

acos() 23年新特性 (chrome 111)

atan() 23年新特性 (chrome 111)

atan2() 23年新特性 (chrome 111)

cos() 23年新特性 (chrome 111)

sin() 23年新特性 (chrome 111)

tan() 23年新特性 (chrome 111)

hypot() 23年新特性 (chrome 120)

ray() 23年新特性 (chrome 116)

exp() 23年新特性 (chrome 120)

log() 23年新特性 (chrome 120)

pow() 23年新特性 (chrome 120)

sqrt() 23年新特性 (chrome 120)

cross-fade() 火狐不支持

element() Experimental 仅火狐 57

abs() 仅火狐 118

round() 仅火狐 118

mod() 仅火狐 118

rem() 仅火狐 118

sign() 仅火狐 118

symbols() 仅火狐 35

-moz-image-rect Non-standard Deprecated