paint 和 paint() 有什么区别？

在现代 CSS 开发中，paint 和 paint() 是两个容易混淆但含义不同的概念。它们都与 CSS Painting API 相关，但用途和语法完全不同。

1. paint：作为属性值或关键字

在某些上下文中，paint 可能作为普通单词出现（例如 SVG 中的 fill="paint"），但这并不常见。更关键的是，在 CSS Houdini 的 CSS Painting API 中，paint 本身并不是一个独立使用的值，而是通过函数形式调用。

2. paint()：CSS Painting API 的核心函数

paint() 是 CSS 中的一个函数，用于调用通过 JavaScript 注册的自定义绘制器（paint worklet）。它允许开发者使用 Canvas 2D API 在 CSS 属性（如 background、border-image 等）中动态绘制图形。

基本语法如下：

background: paint(myCustomPainter);

其中 myCustomPainter 是通过 CSS.paintWorklet.addModule() 注册的绘制模块名称。

3. 实际示例

假设你注册了一个名为 wavy 的绘制器，你可以这样使用：

.element {
  background: paint(wavy);
}

注意：这里必须使用 paint(...) 函数形式，单独写 paint 是无效的。

4. 总结

• paint 单独出现通常没有特殊含义（除非在特定上下文中）。
• paint() 是 CSS 标准函数，用于调用自定义绘制逻辑。
• 正确写法是 paint(绘制器名称)，括号不可省略。

因此，当你看到 “paint 和 paint() 有什么区别” 时，答案很明确：只有 paint() 是有效的 CSS 函数，而 paint 本身在 CSS Painting API 中并不具备功能意义。