函数

描述

CSS 版本

 attr()

返回选择元素的属性值。

2

 calc()

允许计算 CSS 的属性值，比如动态计算长度值。

3

 cubic-bezier()

定义了一个贝塞尔曲线(Cubic Bezier)。

3

 hsl()

使用色相、饱和度、亮度来定义颜色。

3

 hsla()

使用色相、饱和度、亮度、透明度来定义颜色。

3

 linear-gradient()

创建一个线性渐变的图像

3

 radial-gradient()

用径向渐变创建图像。

3

 repeating-linear-gradient()

用重复的线性渐变创建图像。

3

 repeating-radial-gradient()

类似 radial-gradient()，用重复的径向渐变创建图像。

3

 rgb()

使用红®、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。

2

 rgba()

使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

3

 var()

用于插入自定义的属性值。

3

calc() 计算

  • 不能使用当前CSS属性不支持的数据类型。
  • 运算符前后带单位或者带百分号的值只能进行加减运算，不能进行乘除运算
  • 除法运算斜杠右侧必须是不为0的数值类型
  • 加号和减号左右两边一定要有空格，乘法和除法符号两侧无须空格
  • 可以嵌套使用
width: calc(calc(100% -  2rem) / 6);
  • 1.

【实战】自适应布局

width: calc(100% - 20px);
  • 1.

【实战】根据设备屏幕设定根字号大小

html {
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
  • 1.
  • 2.
  • 3.

【实战】无法除尽的等比分配

width: calc(100% / 6);
  • 1.

【实战】制作进度条

 https://demo.cssworld.cn/new/4/5-1.php

min() 最小值

实际效果是限制最大值，适用于弹性布局

如：网页在桌面端浏览器中的宽度为1024px，在移动端的宽度为100%

width: min(1024px, 100%);
  • 1.

max() 最大值

实际效果是限制最小值，适用于弹性布局

width: max(10vw, 5em, 80px);
  • 1.

clamp() 区间值

clamp(MIN, VAL, MAX)
  • 1.

返回一个区间范围的值，等同于max(MIN, min(VAL, MAX))，适用于弹性布局

  • 如果VAL在MIN～MAX范围内，则使用VAL作为函数返回值；
  • 如果VAL大于MAX，则使用MAX作为返回值；
  • 如果VAL小于MIN，则使用MIN作为返回值。

【实战】字体大小随浏览器宽度变化

html {
  font-size: 16px;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 20px);
}
  • 1.
  • 2.
  • 3.
  • 4.

cubic-bezier() 贝塞尔曲线


env() 环境变量


steps() 跳跃动画