跳到主要内容

函数

CSS 里内置了许多函数，可以见 CSS 功能符号 - MDN ，但是你不能自己写函数。

函数选择器​

这样的选择器有 :is() 和 :not() 。

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

自定义属性和 var()​

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

一个自定义属性应当以 -- 开头，这是为了防止与底层的属性名冲突，发生覆盖。

var() 可以接受第二个参数，当第一个参数失败时会使用第二个参数：

.my-element {
    background: var(--base-color, hotpink);
}

获取值的函数​

除了 var() ，还有一些能获取值的函数：

  • attr() 获取元素的属性

    a::after {
      content: attr(href);
    }

  • url() 可以获取图片、字体、内容等

    .my-element {
      background-image: url('/path/to/image.jpg');
    }

颜色函数​

  • rgb() & rgba()

  • hsl() & hsla()

  • lab() & lch()

数学表达式​

  • calc() 计算数值，支持嵌套

    .my-element {
      width: calc(calc(10% + 2rem) * 2);
    }

  • min() 和 max()

    .my-element {
      width: min(20vw, 30rem);
      height: max(20vh, 20rem);
    }

  • clamp(min, ideal, max)

    h1 {
      font-size: clamp(2rem, 1rem + 3vw, 3rem);
    }

形状​

对于 clip-path offset-path shape-outside 函数，可以用 circle() ellipse() inset() 等形状函数。复杂一点也可以用 polygon() 函数。

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

还有个 path() 函数，用来接收 SVG 规则。

转换​

一般这类函数应用在 transform 属性上。

旋转 Rotate​

有 rotateX() rotateY() rotateZ() 函数，表示在 X、Y、Z 轴上旋转。接受一个角度值。

还有 rotate3d() ，接受四个参数：x y z 矢量和旋转角度：

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

缩放 Scale​

有 scaleX()、scaleY()、scaleZ() 缩放函数。同时也有个 scale3d() 函数。

转移 Translate​

有 translate() 转移函数，可以传入 x 值，或者 x 和 y 值。

还有 translateX() translateY() translateZ() 。同时也有个 translate3d() 函数。

倾斜 Skew​

有 skewX() skewY() 倾斜函数。也可以用 skew(X) skew(X, Y) 简写代替。

除了 transform 还有 perspective 属性，用来处理透视效果。

除了以上介绍的，还有动画、渐变颜色、滤镜相关的函数。

参考​

Functions，Learn CSS - web.dev

CSS 功能符号 - MDN