CSS 函数总结

CSS 提供了多种内置函数，用于实现各种样式效果。以下是主要的 CSS 函数分类和总结：

颜色函数

1. rgb() / rgba() ☆☆☆

   • 定义 RGB 颜色
   • rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)

2. hsl() / hsla()

   • 定义 HSL 颜色（色相、饱和度、亮度）
   • hsl(120, 100%, 50%) 或 hsla(120, 100%, 50%, 0.3)

3. hex()

   • 十六进制颜色值
   • #ff0000 或 #f00

4. color()

   • 指定颜色空间中的颜色
   • color(display-p3 1 0 0)

5. hwb()

   • 色相-白度-黑度模型
   • hwb(120 0% 0%)

数学函数

1. calc() ☆☆☆

   • 动态计算值
   • width: calc(100% - 20px)

2. min() ☆☆☆

   • 取最小值
   • width: min(100px, 50%)

3. max() ☆☆☆

   • 取最大值
   • width: max(100px, 50%)

4. clamp()

   • 限制在最小和最大值之间
   • font-size: clamp(1rem, 2.5vw, 2rem)

变换函数

1. rotate() ☆☆☆

   • 旋转元素
   • transform: rotate(45deg)

2. scale() ☆☆☆

   • 缩放元素
   • transform: scale(1.2)

3. translate() ☆☆☆

   • 移动元素
   • transform: translate(10px, 20px)

4. skew()

   • 倾斜元素
   • transform: skew(30deg)

5. matrix()

   • 2D 变换矩阵
   • transform: matrix(1, 0, 0, 1, 0, 0)

渐变函数

1. linear-gradient() ☆☆☆

   • 线性渐变
   • background: linear-gradient(to right, red, blue)

2. radial-gradient()

   • 径向渐变
   • background: radial-gradient(circle, red, blue)

3. conic-gradient()

   • 锥形渐变
   • background: conic-gradient(red, yellow, green)

4. repeating-linear-gradient()

   • 重复线性渐变
   • background: repeating-linear-gradient(red, yellow 10%)

滤镜函数

1. blur()

   • 模糊效果
   • filter: blur(5px)

2. brightness()

   • 亮度调整
   • filter: brightness(0.5)

3. contrast()

   • 对比度调整
   • filter: contrast(200%)

4. drop-shadow()

   • 投影效果
   • filter: drop-shadow(2px 2px 5px black)

5. grayscale()

   • 灰度效果
   • filter: grayscale(100%)

布局函数

1. fit-content()

   • 根据内容调整大小
   • width: fit-content(200px)

2. minmax() ☆☆☆

   • 定义网格轨道大小范围
   • grid-template-columns: minmax(100px, 1fr)

3. repeat() ☆☆☆

   • 重复网格轨道
   • grid-template-columns: repeat(3, 1fr)

其他函数

1. var() ☆☆☆

   • 使用 CSS 变量
   • color: var(--main-color)

2. attr() ☆☆☆

   • 获取 HTML 属性值
   • content: attr(data-tooltip)

3. url() ☆☆☆

   • 引用资源
   • background-image: url('image.jpg')

4. counter() / counters()

   • 计数器
   • content: counter(section)

5. env()

   • 使用环境变量
   • padding-bottom: env(safe-area-inset-bottom)

6. element()

   • 引用其他元素作为图像
   • background-image: element(#myElement)

7. image-set()

   • 根据设备分辨率选择图像
   • background-image: image-set('img-1x.jpg' 1x, 'img-2x.jpg' 2x)

这些 CSS 函数可以组合使用，为网页设计提供强大的样式控制能力。随着 CSS 规范的更新，还会不断有新的函数加入。