css函数

一、 🔢 数值/长度计算

函数	说明	示例
calc()	动态计算长度、百分比、数值等	width: calc(100% - 40px);
min()	取多个值中的最小值	width: min(50%, 300px);
max()	取多个值中的最大值	padding: max(10px, 2vw);
clamp()	设置一个值在最小和最大之间	font-size: clamp(16px, 4vw, 24px);

1.clamp()

把一个值的范围，"夹"在一个最大值和一个最小值之间。

语法：

width: clamp(最小值, 理想值, 最大值);

例：

h1 { font-size: 16px; }
@media (min-width: 768px) { h1 { font-size: 24px; } }
@media (min-width: 1200px) { h1 { font-size: 32px; } }

变为：


h1 {
  /* 最小值是16px，
    理想值是视口宽度的4%，
    最大值是32px。
  */
  font-size: clamp(16px, 4vw, 32px);
}

二、progress()

计算某个数值在一个范围内的"进度比例"

• 当当前值小于或等于开始值时，返回0
• 当当前值大于或等于结束值时，返回1
• 当当前值在两者之间时，返回按比例计算的小数
  • 计算公式是：(当前值 - 开始值) ÷ (结束值 - 开始值)

语法：

progress(<当前值>, <开始值>, <结束值>)

例：

h1 {
  /* 窗口宽度在480px到1200px之间时，字体大小从2rem渐变到3rem */
  font-size: calc(2rem + progress(100vw, 480px, 1200px) * 1rem);
}

三、 🎨 颜色函数

函数	说明	示例
rgb(r, g, b) / rgba(r, g, b, a)	红绿蓝颜色	color: rgb(255, 0, 0);
hsl(h, s, l) / hsla(h, s, l, a)	色相-饱和度-亮度	background: hsl(120, 100%, 50%);
hwb()	色相-白度-黑度（较新）	color: hwb(200 50% 20%);
color-mix()	混合两种颜色（现代浏览器）	background: color-mix(in srgb, red 30%, blue);
lab(), lch()	基于人眼感知的颜色空间	color: lab(70% 20 30);

1.color-mix()

<el-button style="background-color: color-mix(in srgb, red 50%,blue 50%)">123</el-button>

四. 🌀 变换函数（Transform）

用于 transform 属性：

.element {
  transform: 
    translateX(100px)     /* 平移 */
    rotate(45deg)         /* 旋转 */
    scale(1.2)            /* 缩放 */
    skew(10deg)           /* 倾斜 */
    matrix(1,0,0,1,50,50);/* 矩阵变换 */
}

五、 🖼️ 图像/滤镜函数

函数	说明	示例
url()	引用资源	background: url(bg.png);
linear-gradient()	线性渐变	background: linear-gradient(to right, red, blue);
radial-gradient()	径向渐变	background: radial-gradient(circle, red, yellow);
conic-gradient()	圆锥渐变	background: conic-gradient(red, green, blue);
blur(), grayscale(), opacity() 等	滤镜效果	filter: blur(5px) grayscale(100%);

六、 📐 其他实用函数

函数	说明	示例
var(--name)	使用 CSS 自定义属性（变量）	color: var(--primary-color);
attr()	获取 HTML 属性值（常用于 content）	content: attr(data-label);
counter()	计数器（用于自动编号）	content: counter(section) ".";