CSS 所有常用函数演示 + 参数说明
🎨 颜色函数
rgb(R, G, B)
函数：rgb(R, G, B)
示例：background-color: rgb(255, 99, 71)
说明：红绿蓝三色值（0~255）
rgba(R, G, B, A)
函数：rgba(R, G, B, A)
示例：background-color: rgba(255, 99, 71, 0.5)
说明：带透明度的 RGB 颜色
hsl(H, S%, L%)
函数：hsl(H, S%, L%)
示例：background-color: hsl(210, 50%, 50%)
说明：基于色相、饱和度、亮度的颜色表示
hsla(H, S%, L%, A)
函数：hsla(H, S%, L%, A)
示例：background-color: hsla(210, 50%, 50%, 0.6)
说明：带透明度的 HSL 颜色
color()
函数：color(基础色 操作 值)
示例：background-color: color(rgb(255, 99, 71) tint 20%)
说明：实验性功能，用于派生新颜色
🧮 属性函数
var(), attr()
函数：
- attr(data-text)
- var(--main-color)
说明：
- attr() 获取 HTML 属性值
- var() 使用自定义 CSS 变量
🧮 数学函数
calc()
函数：calc(表达式)
示例：width: calc(100% - 40px)
说明：支持加减乘除运算符两侧需空格
min(), max()
函数：
- min(值1, 值2, ...)
- max(值1, 值2, ...)
示例：
width: min(300px, 50%)
height: max(100px, 20vh)
说明：取最小或最大值
clamp()
函数：clamp(最小值, 默认值, 最大值)
示例：font-size: clamp(16px, 2vw, 24px)
说明：字体大小随视口变化
🖼️ 背景函数
url()
函数：url(路径)
示例：background-image: url('image.png')
说明：加载本地或远程图片资源
linear-gradient()
函数：linear-gradient(方向, 颜色停止点...)
示例：background-image: linear-gradient(to right, red, yellow)
说明：线性渐变背景
radial-gradient()
函数：radial-gradient(类型/位置, 颜色停止点...)
示例：background-image: radial-gradient(circle, blue, white)
说明：径向渐变背景
conic-gradient()
函数：conic-gradient(起始角, 中心点, 颜色停止点...)
示例：background-image: conic-gradient(from 90deg, red, green, blue)
说明：锥形渐变背景
repeating-linear-gradient()
函数：repeating-linear-gradient(...)
示例：
background-image: repeating-linear-gradient(to bottom,
red,
red 10px,
yellow 10px,
yellow 20px)
说明：重复线性渐变
🎞️ 滤镜函数
blur(), brightness(), contrast(), saturate()
函数：
- blur(半径)
- brightness(倍数)
- contrast(倍数)
- saturate(倍数)
示例：
filter: blur(5px) brightness(1.2) contrast(1.1) saturate(1.5)
说明：多种图像滤镜叠加使用
📐 图像裁剪函数
circle()
函数：circle(半径 at 位置)
示例：clip-path: circle(50%)
说明：圆形裁剪
polygon()
函数：polygon(坐标点列表)
示例：clip-path: polygon(50% 0%, 100% 100%, 0% 100%)
说明：多边形裁剪
🔄 变换函数
⏱️ 动画缓动函数
cubic-bezier()
函数：cubic-bezier(x1, y1, x2, y2)
示例：animation: moveBox 2s cubic-bezier(0.1, 0.7, 1.0, 0.1)
说明：自定义动画缓动曲线
steps()
函数：steps(步数, 步进方式)
示例：animation: stepAnim 2s steps(4, end)
说明：逐帧动画