CSS函数

第6章：CSS函数

6.1 数学函数

6.1.1 calc() 函数

calc() 函数允许在CSS属性值中进行数学计算，支持加减乘除运算。

/* 基本计算 */
.container {
  width: calc(100% - 40px);
  height: calc(100vh - 80px);
}

/* 混合单位计算 */
.element {
  margin: calc(2rem + 10px);
  font-size: calc(1rem + 0.5vw);
}

/* 复杂表达式 */
.grid-item {
  width: calc((100% - 3 * 20px) / 4); /* 4列网格，间距20px */
  height: calc(50vh - 2rem);
}

/* 响应式布局 */
.sidebar {
  width: calc(300px + 5vw);
}

.main-content {
  width: calc(100% - (300px + 5vw));
}

6.1.2 min() 和 max() 函数

min() 和 max() 函数分别返回参数列表中的最小值和最大值。

/* min() 函数应用 */
.container {
  width: min(100%, 1200px); /* 不超过1200px */
  padding: min(2rem, 5vw);
  font-size: min(16px, 4vw);
}

/* max() 函数应用 */
.element {
  width: max(300px, 50%); /* 至少300px */
  height: max(200px, 25vh);
  margin: max(1rem, 2vw);
}

/* 组合使用 */
.responsive-text {
  font-size: min(max(16px, 4vw), 24px); /* 16px-24px之间 */
}

/* 布局应用 */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

6.1.3 clamp() 函数

clamp() 函数设置一个值的范围，包含最小值、首选值和最大值。

/* 响应式字体大小 */
.heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.text {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: clamp(1.4, 1.6, 1.8);
}

/* 布局尺寸 */
.sidebar {
  width: clamp(250px, 30%, 400px);
}

.card {
  padding: clamp(1rem, 3vw, 2rem);
  margin: clamp(0.5rem, 2vw, 1.5rem);
}

/* 复杂应用 */
.hero {
  height: clamp(300px, 50vh, 600px);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

6.2 颜色函数

6.2.1 rgb() 和 rgba()

/* RGB颜色 */
.primary {
  color: rgb(0, 123, 255);
  background-color: rgba(0, 123, 255, 0.1);
}

/* 变量结合 */
:root {
  --primary-r: 0;
  --primary-g: 123;
  --primary-b: 255;
}

.button {
  background: rgb(var(--primary-r), var(--primary-g), var(--primary-b));
  border: 1px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.3);
}

6.2.2 hsl() 和 hsla()

HSL颜色模型更直观，便于调整色调、饱和度和亮度。

/* HSL基础 */
.primary {
  color: hsl(210, 100%, 50%); /* 蓝色 */
  background: hsla(210, 100%, 50%, 0.1);
}

/* 动态调整 */
.button {
  background: hsl(210, 100%, 50%);
}

.button:hover {
  background: hsl(210, 100%, 40%); /* 变暗 */
}

.button:active {
  background: hsl(210, 100%, 60%); /* 变亮 */
}

/* 主题系统 */
:root {
  --hue: 210;
  --saturation: 100%;
  --lightness: 50%;
}

.theme-element {
  color: hsl(var(--hue), var(--saturation), var(--lightness));
  border-color: hsla(var(--hue), var(--saturation), var(--lightness), 0.3);
}

6.2.3 现代颜色函数

/* lab() 和 lch() */
.modern-color {
  color: lab(60 40 30); /* 感知均匀的颜色空间 */
  background: lch(60% 40 270); /* 亮度、色度、色调 */
}

/* color-mix() */
.mixed-color {
  background: color-mix(in srgb, blue 30%, white);
  color: color-mix(in hsl, red 50%, yellow);
}

/* color-contrast() */
.accessible-text {
  color: color-contrast(black vs white, #333, #666, #999);
}

6.3 变换函数

6.3.1 2D变换函数

/* 平移 */
.translate {
  transform: translate(50px, 20px);
  transform: translateX(100px);
  transform: translateY(-50px);
}

/* 旋转 */
.rotate {
  transform: rotate(45deg);
  transform: rotate(0.5turn); /* 180度 */
}

/* 缩放 */
.scale {
  transform: scale(1.5);
  transform: scaleX(2);
  transform: scaleY(0.5);
}

/* 倾斜 */
.skew {
  transform: skew(30deg, 10deg);
  transform: skewX(15deg);
  transform: skewY(-5deg);
}

/* 组合变换 */
.complex-transform {
  transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}

6.3.2 3D变换函数

/* 3D平移 */
.transform-3d {
  transform: translate3d(100px, 50px, -200px);
  transform: translateZ(100px);
}

/* 3D旋转 */
.rotate-3d {
  transform: rotate3d(1, 1, 1, 45deg);
  transform: rotateX(30deg);
  transform: rotateY(60deg);
  transform: rotateZ(15deg);
}

/* 透视 */
.perspective {
  perspective: 1000px;
  transform: perspective(500px) rotateY(45deg);
}

/* 3D变换组合 */
.card-3d {
  transform: 
    perspective(1000px) 
    rotateY(30deg) 
    translateZ(50px);
}

6.4 渐变函数

6.4.1 线性渐变

/* 基本线性渐变 */
.gradient-basic {
  background: linear-gradient(45deg, red, blue);
}

/* 多色渐变 */
.gradient-multi {
  background: linear-gradient(
    to right,
    red,
    orange 25%,
    yellow 50%,
    green 75%,
    blue
  );
}

/* 重复线性渐变 */
.repeating-gradient {
  background: repeating-linear-gradient(
    45deg,
    #ff6b6b,
    #ff6b6b 10px,
    #4ecdc4 10px,
    #4ecdc4 20px
  );
}

/* 复杂应用 */
.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.8) 0%,
    rgba(78, 205, 196, 0.8) 50%,
    rgba(77, 171, 247, 0.8) 100%
  );
}

6.4.2 径向渐变

/* 基本径向渐变 */
.radial-basic {
  background: radial-gradient(circle, red, blue);
}

/* 椭圆渐变 */
.radial-ellipse {
  background: radial-gradient(
    ellipse at center,
    red 0%,
    orange 25%,
    yellow 50%,
    green 75%,
    blue 100%
  );
}

/* 位置控制 */
.radial-positioned {
  background: radial-gradient(
    circle at 20% 80%,
    #ff6b6b,
    #4ecdc4
  );
}

/* 重复径向渐变 */
.repeating-radial {
  background: repeating-radial-gradient(
    circle,
    #ff6b6b,
    #ff6b6b 10px,
    #4ecdc4 10px,
    #4ecdc4 20px
  );
}

6.4.3 锥形渐变

/* 锥形渐变 */
.conic-gradient {
  background: conic-gradient(
    from 0deg at 50% 50%,
    red,
    yellow,
    green,
    blue,
    red
  );
}

/* 饼图效果 */
.pie-chart {
  background: conic-gradient(
    red 0% 25%,
    yellow 25% 50%,
    green 50% 75%,
    blue 75% 100%
  );
  border-radius: 50%;
}

/* 重复锥形渐变 */
.repeating-conic {
  background: repeating-conic-gradient(
    from 0deg,
    red 0deg 30deg,
    blue 30deg 60deg,
    green 60deg 90deg,
    yellow 90deg 120deg
  );
}

6.5 滤镜函数

6.5.1 基础滤镜

/* 模糊效果 */
.blur {
  filter: blur(5px);
}

.backdrop-blur {
  backdrop-filter: blur(10px);
}

/* 亮度调整 */
.brightness {
  filter: brightness(150%);
}

.darkness {
  filter: brightness(50%);
}

/* 对比度 */
.contrast {
  filter: contrast(200%);
}

/* 灰度 */
.grayscale {
  filter: grayscale(100%);
}

/* 色相旋转 */
.hue-rotate {
  filter: hue-rotate(90deg);
}

6.5.2 高级滤镜组合

/* 多重滤镜 */
.photo-effect {
  filter: 
    brightness(110%)
    contrast(120%)
    saturate(130%)
    hue-rotate(10deg)
    blur(1px);
}

/* 复古效果 */
.vintage {
  filter: 
    sepia(50%)
    saturate(150%)
    hue-rotate(-10deg)
    contrast(90%);
}

/* 现代效果 */
.modern {
  filter: 
    brightness(105%)
    contrast(115%)
    saturate(110%)
    hue-rotate(5deg);
}

6.6 混合模式函数

6.6.1 背景混合模式

/* 叠加模式 */
.overlay {
  background: 
    linear-gradient(45deg, red, blue),
    url('pattern.png');
  background-blend-mode: overlay;
}

/* 多重背景混合 */
.complex-blend {
  background: 
    linear-gradient(45deg, rgba(255,0,0,0.5), rgba(0,0,255,0.5)),
    radial-gradient(circle, rgba(0,255,0,0.3), transparent),
    url('texture.jpg');
  background-blend-mode: multiply, screen;
}

6.6.2 混合模式函数

/* mix-blend-mode */
.text-overlay {
  mix-blend-mode: difference;
  color: white;
}

/* 隔离混合 */
.isolated-blend {
  isolation: isolate;
  mix-blend-mode: multiply;
}

6.7 自定义属性与函数结合

6.7.1 变量在函数中的应用

:root {
  --primary-hue: 210;
  --spacing: 1rem;
  --max-width: 1200px;
  --blur-amount: 5px;
}

/* 动态计算 */
.container {
  max-width: calc(var(--max-width) - 2 * var(--spacing));
  padding: var(--spacing);
}

/* 动态颜色 */
.themed-element {
  background: hsl(var(--primary-hue), 100%, 50%);
  filter: blur(var(--blur-amount));
}

/* 响应式变量 */
@media (min-width: 768px) {
  :root {
    --spacing: 2rem;
    --blur-amount: 10px;
  }
}

6.7.2 函数式变量

:root {
  --scale-factor: 1.2;
  --rotation: 45deg;
  --gradient-angle: 135deg;
}

/* 变换函数与变量 */
.animated-element {
  transform: 
    scale(var(--scale-factor)) 
    rotate(var(--rotation));
}

/* 渐变与变量 */
.gradient-bg {
  background: linear-gradient(
    var(--gradient-angle),
    red,
    blue
  );
}

6.8 数学和三角学函数

6.8.1 三角函数

/* sin() 和 cos() */
.wave {
  /* 使用三角函数创建波形效果 */
  transform: translateY(calc(sin(var(--angle)) * 10px));
}

.circular {
  /* 圆形运动 */
  transform: 
    translateX(calc(cos(var(--angle)) * 100px))
    translateY(calc(sin(var(--angle)) * 100px));
}

/* 复杂动画 */
.orbital {
  transform: 
    rotate(calc(var(--time) * 1deg))
    translateX(calc(cos(var(--time)) * 200px))
    translateY(calc(sin(var(--time)) * 200px));
}

6.8.2 幂和平方根函数

/* pow() 和 sqrt() */
.exponential {
  font-size: calc(pow(1.2, var(--level)) * 1rem);
}

.quadratic {
  width: calc(sqrt(var(--area)) * 1px);
}

/* 复杂计算 */
.dynamic-sizing {
  width: calc(pow(2, var(--index)) * 10px);
  height: calc(sqrt(var(--area)) * 2px);
}

6.9 响应式函数模式

6.9.1 流体排版

/* 响应式字体缩放 */
.fluid-typography {
  font-size: clamp(1rem, 4vw, 2rem);
  line-height: clamp(1.4, 1.6, 1.8);
}

/* 复杂响应式计算 */
.responsive-layout {
  width: min(100%, calc(1200px - 2 * var(--spacing)));
  height: max(300px, calc(50vh - 2rem));
  padding: clamp(1rem, 3vw, 2rem);
}

6.9.2 自适应间距

/* 动态间距系统 */
.spacing-system {
  margin: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* 比例间距 */
.proportional-spacing {
  padding: calc(var(--base-spacing) * 1);
  margin: calc(var(--base-spacing) * 2);
  gap: calc(var(--base-spacing) * 0.5);
}

6.10 性能优化和最佳实践

6.10.1 函数性能考虑

/* 高效使用函数 */
/* 推荐 - 预计算 */
:root {
  --calculated-width: calc(100% - 40px);
}

.container {
  width: var(--calculated-width); /* 一次计算，多次使用 */
}

/* 避免过度计算 */
/* 不推荐 */
.element {
  width: calc(calc(100% - 20px) / 2); /* 嵌套计算 */
}

/* 推荐 */
.element {
  width: calc((100% - 20px) / 2);
}

6.10.2 浏览器兼容性处理

/* 渐进增强 */
.container {
  width: 90%; /* 回退值 */
  width: min(100%, 1200px);
}

/* 特性检测 */
@supports (width: min(100px, 50%)) {
  .modern-layout {
    width: min(100%, 1200px);
  }
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .modern-color {
    background: color-mix(in srgb, var(--primary) 50%, white);
  }
}

6.11 总结

CSS函数极大地扩展了样式表的能力，使得动态计算、复杂效果和响应式设计变得更加简单和强大。从基本的数学计算到高级的颜色操作和变换效果，现代CSS函数为开发者提供了丰富的工具集。合理使用这些函数可以创建更加灵活、可维护和性能优异的样式系统。