# @cssints/gradient 中文文档

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

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

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

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

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

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

## 中文简介

Csints 的简化梯度: 构建时将宽度曲线扩展为颜色站( 以 oklab 混合)

## 安装

```sh
npm install @cssints/gradient
```

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

## README

# @ cssints/ 渐变

减轻梯度 [点缀](https://npmcn.com/package/README.md): 沿着平缓曲线从一色到一色的梯度,扩展为 颜色在构建时会停止,所以在二站式梯度显示一站时,淡出没有硬边. 它是一个价值成员 `cssints/plugin` `scope()` 返回一个 `<image>`,所以它去一个图像去的地方(`backgroundImage`, (中文(简体) ), `maskImage`, (中文(简体) ), `borderImageSource`) (中文(简体) ). 没有运行时间.

```ts
import { backgroundImage, createTokens } from "cssints" with { type: "cssints" };
import { gradient } from "@cssints/gradient" with { type: "cssints" };

const t = createTokens({ color: { $type: "color", ink: { $value: "#111111" } } });

// gradient(kind, direction, from, to, easing?, stops?)
export const fade = backgroundImage(
  gradient("linear", "to bottom", "#000", "transparent", "ease-in-out", 5),
);
export const glow = backgroundImage(
  gradient("radial", "circle at top", "red", "blue", "cubic-bezier(0.5, 0, 0.5, 1)", 4),
);
export const ink = backgroundImage(
  gradient("linear", "to right", t.color.ink, "white", "ease-in", 4),
);
```

```css
._4we9ve {
  background-image: linear-gradient(
    to bottom,
    #000,
    #000000d7 27.44%,
    #00000080 50%,
    #00000028 72.56%,
    transparent
  );
}
._ba8wye {
  background-image: radial-gradient(circle at top, red, #c44a6f 37.04%, #5348d0 62.96%, blue);
}
._1l9gl59 {
  background-image: linear-gradient(
    to right,
    var(--color-ink),
    color-mix(in oklab, var(--color-ink), white 25.93%) 44.59%,
    color-mix(in oklab, var(--color-ink), white 74.07%) 83.41%,
    white
  );
}
```

## 规则

-   **参数**,每个字符串 : `kind` 实值 `linear`, (中文(简体) ), `radial` 或者说 `conic`· ; `direction` 这是第一个 参数,要求(`"to bottom"`, (中文(简体) ), `"45deg"`, (中文(简体) ), `"circle at top"`, (中文(简体) ), `"at center"`, (中文(简体) ), `"from 90deg"`(三); `from` 财务报告和审定财务报表 `to` 为: 颜色或颜色符号; `easing` 实值 `linear`, (中文(简体) ), `ease`, (中文(简体) ), `ease-in`, (中文(简体) ), `ease-out`, (中文(简体) ), `ease-in-out` (默认)或 `cubic-bezier(x1, y1, x2, y2)`· ; `stops` 是 2 到 64 (13 默认)。 检查它们的类型 并在建筑中再次检查 时间,与一个语法相反.
-   **停止** 设置为后cs- easing- 梯度值 `t` 样本均匀, `x(t)` 这是 停止位置和 `y(t)` 份额 `to` 在它里面。 内。 过度射入的曲线( A)`y` 在0到1外 夹住两个 颜色.
-   **颜色** 和多倍相混合的α, 因为CSS混合它们,所以 `transparent` 淡出另一种颜色的花色 并且不要灰化它。 端点以书面打印;中间的站点为 sRGB hex(`#rrggbbaa` 当不是时 (原始内容存档于2012-10-12). Official website. 位置和股票最多有2个小数,因此每个积分的输出都是一样的.
-   **脚趾和 `currentColor`。 。 。 .** 信使来了 `var(--name)` 财务报告和审定财务报表 `currentColor` 元素的: 无法读取 建立时间。 当一个终点不能是,每站都是 `color-mix(in oklab, from, to N%)` 担任同样职位的 浏览器混合它们. `color-mix()` 需要Chrome 111, Safari 16.2, Firefox 113: 对于老目标,建筑警告,因为它 用于任何值.
-   **错误**在调用时:语法以外的部分(`gradient: unexpected "steps(4" in "linear to bottom red blue steps(4)", expected linear | <cubic-bezier-easing-function> | <integer> | end of value`),按错误顺序的参数 (单位:千美元)`cssints: gradient(): "blue" is not an easing (the arguments are kind, direction, from, to, easing?, stops?)`页:1 图像不走时的梯度(`css.color(gradient(…))`,在类型和构建时间出现错误.

## 限制

-   将两个字形颜色之间的一站被夹到 sRGB:一个宽加穆特端点(`color(display-p3 …)`一个生动的 `oklch()`(中文(简体) ) 将自己的值保留在结尾,但相间的颜色是最近的 sRGB 。 给它作为纪念 保持游戏: 车站就是了 `color-mix()`。 。 。 .
-   `steps()` 财务报告和审定财务报表 `linear()` 没有放松,也没有放松的标志(没有放松的标志类型),也没有数字标志 页:1 `stops`页:1 `repeating-*` 梯度、两种以上颜色和一种颜色插入方法(`in oklch`(没有) 也一样.
-   这些部分与语法的空格相接(参见API参考文献中的"功能"),所以 `"to", "bottom"` 作为两个 参数通过语法,只被参数检查所捕获;将方向写成一个字符串.

```bash
cd packages/gradient && bun run test        # the stop math, fixtures through the engine (output, errors)
cd packages/gradient && bun run typecheck   # and the type test, test/types/gradient.ts
```

## 贷项

停止跟着 [升学率](https://github.com/larsenwork/postcss-easing-gradients) 财务报告和审定财务报表 [放松坐标](https://github.com/larsenwork/easing-coordinates) (麻省理工学院,安德烈亚斯·拉森):缓冲曲线取样 进入颜色站。 代码在此被写入; 没有复制代码 。 颜色被混合 [库罗里语name](https://culorijs.org/) (麻省理工学院,丹·伯佐),一个附属公司.

## 常见问题

### @cssints/gradient 是什么？

Csints 的简化梯度: 构建时将宽度曲线扩展为颜色站\( 以 oklab 混合\)

### 如何安装 @cssints/gradient？

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

### @cssints/gradient 支持 TypeScript 吗？

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

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

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

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

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

### @cssints/gradient 可以商用吗？

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

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

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

### @cssints/gradient 还在维护吗？

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