# @cssints/gradient-2d 中文文档

规范地址：https://npmcn.com/package/%40cssints/gradient-2d/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:55:31.966Z
中文译文更新时间：2026-11-11T03:56:25.834Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/gradient-2d
原文对照：https://npmcn.com/package/%40cssints/gradient-2d/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：31.2 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：1 个
- peer 依赖：cssints ^0\.35\.0
- 首次发布：2026-10-21T14:24:17.112Z
- 最新版本发布：2026-11-07T14:55:31.624Z
- 近 30 天下载量：6638（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 38 个）

## 中文简介

csints 的 mesh- gradient () 和 freeform- gradient () : 浏览器所在的本地函数, 或者运行时绘制的画布

## 安装

```sh
npm install @cssints/gradient-2d
```

也可以使用：`pnpm add @cssints/gradient-2d`、`yarn add @cssints/gradient-2d`、`bun add @cssints/gradient-2d`

## README

# @ cssints/ 渐变-2d

`mesh-gradient()` 财务报告和审定财务报表 `freeform-gradient()` 页:1 [点缀](https://npmcn.com/package/README.md)作为样式 `cssints/plugin` `scope()`。 。 。 . 在浏览器具有CSS功能的地方,样式使用. 如果没有,则运行时间会在画布上绘制梯度 将绘图设为背景. **还没有浏览器的功能**,所以今天运行时间绘制出每个梯度 第一种颜料是freeform的堆叠光圈梯度或网状平均颜色.

**现状(2026-10-17).** CSSWG在2026-10-14日采用网格和自由成型梯度为cs-images-5,作为解释者 (单位:千美元)[css-images-5/ 解释者/2d- 梯级数](https://github.com/w3c/csswg-drafts/blob/main/css-images-5/explainers/2d-gradients.md)) (中文(简体) ). 这不是一个语法草案:语法仍然可以改变。 自由格式可以重新命名 `diffusion-gradient()`,也没有 函数的渲染规则是公开的,所以这里的图画都是 **此软件包的算法**,而不是浏览器或 以通通论者.

```ts
import { cn, color } from "cssints" with { type: "cssints" };
import { freeformGradient, meshGradient } from "@cssints/gradient-2d" with { type: "cssints" };

export const hero = cn(meshGradient("red, blue; green, yellow"), color("white"));
export const panel = freeformGradient("red top left, gold 4 60% 40%, yellow bottom right");
```

```css
@layer _.k {
  ._gradient2d-core {
    background-image: var(--gradient2d-fallback);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  /* only where the browser parses the function */
  @supports (background-image: mesh-gradient(red, blue; green, yellow)) {
    ._gradient2d-core {
      background-image: var(--gradient2d-native);
    }
  }
  ._gradient2d-ff {
    background-image: var(--gradient2d-ff-fallback);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  @supports (background-image: freeform-gradient(red top left, blue bottom right)) {
    ._gradient2d-ff {
      background-image: var(--gradient2d-ff-native);
    }
  }
}
@layer _.a {
  ._1gxhgq5 {
    --gradient2d-native: mesh-gradient(red, blue; green, yellow);
    --gradient2d-fallback: linear-gradient(#918d78, #918d78);
    --gradient2d-data: '{"space":"oklab","rows":[[[1,0,0,1],[0,0,1,1]],[[0,0.502,0,1],[1,1,0,1]]]}';
  }
  ._1ps31mi {
    --gradient2d-ff-native: freeform-gradient(red top left, gold 4 60% 40%, yellow bottom right);
    --gradient2d-ff-fallback:
      radial-gradient(circle at 0% 0%, #ff0000, transparent),
      radial-gradient(circle at 60% 40%, #ffd700, transparent),
      radial-gradient(circle at 100% 100%, #ffff00, transparent);
    --gradient2d-ff-data: '{"space":"oklab","points":[[0,0,1,[1,0,0,1]],[0.6,0.4,4,[1,0.8431,0,1]],[1,1,1,[1,1,0,1]]]}';
  }
}
```

原生值是 spec 的文本,按所写. 数据是作为 sRGB 数字的站点或点,用于运行时间. 网络 倒回是它的站点的平均颜色,在oklab中;freeform's是一个光圈层每点.

## 语法

### `meshGradient(mesh)`

-   **`meshGradient(mesh)`**,一个字符串: 站行,行相隔 `;` 从盒子顶上往下, 停下来 `,` 从左边。 站为颜色 : `red`, (中文(简体) ), `#888`, (中文(简体) ), `oklch(...)`,或 `var(--token)`。 。 。 .
-   **`in oklab`** 或者说 **`in srgb`** 可能打开文本, 如规格所示: `meshGradient("in oklab, red, blue; green, yellow")`。 。 。 . 之后的颜色( A)`in oklab red, ...`)是网格外的颜色. 检查并保持原生价值,但 从未绘制 : 网格覆盖整个框 .
-   **构建错误**,在调用时:长度不同的行,少于2行的2站,这种颜色不解析, 另一种颜色的空间 比oklab或srgb, 和一个站台的位置, `by` 或者说 `with`。 。 。 .
-   **尚未支持 :** 职位(`red 0% 0%`控制点(`by`, (中文(简体) ), `with`) (中文(简体) ). 网格是固定的:角 坐在盒子的角落 其他站点的间隔均匀 位置需要网格扭曲 运行时间还没有完成 。 两者都是构建错误,而不是忽略.
-   **`var(--token)` 停下来** 工作时 浏览器解决了它们: 绘图等待运行时间, 而第一个油漆没有 倒计时( e)`--gradient2d-fallback: none`) (中文(简体) ).

### `freeformGradient(points)`

-   **`freeformGradient(points)`**,一个字符串:由 `,`,每个 `<color> <number>? <position>`数字是 重点 **传播**以物配主, 位置是关键词 (单位:千美元)`top left`, (中文(简体) ), `bottom right`, (中文(简体) ), `center`)或一个或两个百分比,如: `background-position` 读出来 (单位:千美元)`gold 4 60% 40%`, (中文(简体) ), `blue right 10%` 百分之九十跨度).
-   **`in oklab`** 或者说 **`in srgb`** 可能打开文本, 如规格所示: `freeformGradient("in srgb, red 20% 30%, blue")`。 。 。 . 该函数在点外没有颜色,因此方法后的一个颜色是构建错误.
-   **构建错误**,在调用时:一个没有位置的点,不到2分,两个点在同一位置(他们 重量都是无限的,一种不解析的颜色,一个长度(`10px` 框),行(与 多个位置,spec的未来工作)和外形.
-   **尚未支持 :** 线条、形状和长度,如上。 A 类 `var(--token)` 点工作:浏览器解决了它, 在 倒计时.

## 浏览器

-   **土著**: 任何浏览器中都没有任何功能. 已安装的 Chrome 中 `test:browser` 报告没有支持,所以 运行时间绘图 。 这个 `@supports` 测试是光谱最简单的例子: `mesh-gradient(red, blue; green, yellow)` 财务报告和审定财务报表 `freeform-gradient(red top left, blue bottom right)`。两者是分开决定的,所以一个有网点的浏览器,没有 freeform 只取网状树枝(`_gradient2d-ff` 这是它自己的一个阶级.
-   **运行时间** 位于每个浏览器列表目标包括BCD跟踪的浏览器的构建中. 表格在 `@cssints/css-grammar` 说每个这样的浏览器都缺少 `css.types.gradient.mesh-gradient` 财务报告和审定财务报表 `css.types.gradient.freeform-gradient` (碱性催化分解没有条目。) 当BCD或表格有一个带有其中之一的浏览器时 他们,运行时间的舰只 到没有它的目标.
-   **运行时间需求** `ResizeObserver`,画布和 `MutationObserver` (如果页面有, 绘图工作).

## 运行时间

-   **算法是这个包的,不是光谱,也不是Illustrator的.** 网格是一个双子体(Catmull-Rom),穿过 4 × 4 相接点; 光谱插出一个有 Bézier 控制点的 收发器补丁, 此套件 没有模型。 自由格式为 **反相相加权**:一个点的颜色是站点的加权平均值, 车站的重量 `spread / d²`{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}在奥克莱布 光谱暗示了Delaunay三角形;freeform的渲染规则是 不公开(Josh Tumath, 2026-06-25),所以还没有浏览器或编辑同意. IDW被选在Delaunay上是因为 盒子的每个像素都有重量: 三角形只画出点状凸起的船体,留下其余部分 未定义的框(插入 `docs/research/2d-gradients.md` 正好看到了硬壳的边缘 这包是自己的 读取IDW渲染为柔软圆形blobs,一站一站,可分辨出传播. 画是近亲 显示浏览器的平面,而不是相同的表面。 以眼相较.
-   **决议.** 画布是盒子的四分之一(至少64px),浏览器将画布伸到盒子上. 一个大盒子 是柔软的,不是尖锐的。 在Chrome(安装的1,1000×600,6个缩放在800-1000px之间的中位数),帆布 250×150,新背景的时间,布局和PNG编码包括: 网格重绘为49ms,freeform in 34分钟。 自由形的相距在盒子的像素(高度/宽度)中被测量出,如同倒回的光圈层是, 所以一点的影响是屏幕上的一圈而不是椭圆.
-   **尺寸.** 3.9 kB 精密化,1.9 kB gziped for both rules(用滚倒的精密度测量 `dist/runtime.mjs` 联 合 国 `vp pack` 没有修改)。 单网格为 2.9 kB / 1.6 kB,与加入freeform 之前一样; `@cssints/balance`是因为 脚本为552字节.
-   **数据与征兆.** 运行时间读 `--gradient2d-data` 或者说 `--gradient2d-ff-data` (JSON在CSS字符串中). A 类 `var()` stop通过元素的隐藏子读取,从而继承元素的自定义属性,以及1×1画布 将计算出的颜色转换为 SRGB .
-   **雷德劳.** 在大小变化时,当一个元素得到标记类时(加入到页面中或稍后给予该类). 两种规则都有一个 `ResizeObserver` 和一个 `MutationObserver` (src/canvas.ts) (英语). 新画时已经过时 一个完成被放弃。 前一个 blob URL 已被取消 .
-   **第一次涂料没有JS.** Freeform的倒背是一叠光圈梯度,每点一层:它的颜色在 指向盒子最远一角的透明 它与自己的混合物(α,在 浏览器的空间, 不 `spread / d²` 在木板里,没有铺垫 `var()` 点,网点的 平均颜色不能.
-   **CSP. (中文(简体) ).** 后退是一个 `blob:` URL (中文(简体) ). 页面需要 `img-src blob:` (或 `img-src` 与 `blob:` 用来画画.
-   **苏维埃社会主义共和国.** 跑步时间没有结果 `document`. 第一种涂料是内核倒置.

## 限制

-   **Freeform的倒置及其画作不同意像素的像素.** 光线梯度的堆叠是一个低可靠性 首先涂料,而不是IDW规则:其混合在相距和浏览器的色彩空间中是线性的.
-   **一个条件可以改变数据,运行时间在平分时读取.** `hover(meshGradient(...))` 输入数据 下级 `:hover` (已选中: 引擎打印它; 绘图在悬浮时不会改变, 只在下一个调整大小时才会改变 .
-   **从页面上移除的元素保留了它的观察者和其blob URL** 直到页面卸下。 页面罚款,不 用于一个长一页的应用软件,该应用将显示梯度;一个固定将观测清除.
-   **打印** 带光栅后退。 浏览器freeform的 PDF 是补丁阴影,不是位图,freeform是 大型在 PDF 中.
-   **语法可以改变** 直到光谱草稿, 和freeform的名字与它(`diffusion-gradient()`); 构建错误 信件指定他们拒绝的部分.

```bash
cd packages/gradient-2d && bun run test           # the maths in Node, the engine (kernels, data, errors, the runtime by targets)
cd packages/gradient-2d && bun run typecheck      # and the type tests
cd packages/gradient-2d && bun run test:browser   # Chrome (installed): both first paints, the pixels against the maths, resize, an added element
```

## 常见问题

### @cssints/gradient-2d 是什么？

csints 的 mesh- gradient \(\) 和 freeform- gradient \(\) : 浏览器所在的本地函数, 或者运行时绘制的画布

### 如何安装 @cssints/gradient-2d？

在项目目录运行 npm install @cssints/gradient-2d，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/gradient-2d 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/gradient-2d 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/gradient-2d 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/gradient-2d 可以商用吗？

@cssints/gradient-2d 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/gradient-2d 的下载量有多少？

根据 npm 官方下载统计，@cssints/gradient-2d 在 2026/10/11 – 2026/11/09 这 30 天内被下载 6,638 次，日均约 221 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/gradient-2d 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 38 个版本，其中过去 12 个月发布了 38 个；首次发布于 2026/10/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。