# @cssints/squircle 中文文档

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

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

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

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

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

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

## 中文简介

Csints的 Squircle 角: 本地角形: Squircle, 一个目标缺少的 CSS 口罩

## 安装

```sh
npm install @cssints/squircle
```

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

## README

# @ cssints/ squircle (英语)

弯曲角为 [点缀](https://npmcn.com/package/README.md),作为一个链条成员 `cssints/plugin` `scope()`: 本国 `corner-shape: squircle` 目标所在处(Chrome 139),以及一个CSS口罩,在缺乏时切入相同的曲线 这个 没有脚本.

```ts
import { bg, cn, hover } from "cssints" with { type: "cssints" };
import { squircle } from "@cssints/squircle" with { type: "cssints" };

export const icon = cn(squircle().radius("24px"), bg("tomato"));
export const card = cn(squircle(), hover(squircle().radius("2rem")));
```

```css
@layer _.k {
  ._squircle-core {
    border-radius: var(--squircle-r);
    corner-shape: squircle;
    --squircle-r: 1rem;
  }
  /* only when a browserslist target lacks corner-shape (Firefox, Safari today) */
  @supports not (corner-shape: squircle) {
    ._squircle-core {
      --squircle-m: url("data:image/svg+xml,%3Csvg … viewBox='-1 -1 2 2' preserveAspectRatio='none'%3E%3Cpath d='M1 0C1 .92 .92 1 0 1…Z'/%3E%3C/svg%3E");
      border-radius: 0;
      mask:
        var(--squircle-m) 0 0 / min(2 * var(--squircle-r), 100%) min(2 * var(--squircle-r), 100%)
          no-repeat,
        var(--squircle-m) 100% 0 / … no-repeat,
        var(--squircle-m) 0 100% / … no-repeat,
        var(--squircle-m) 100% 100% / … no-repeat,
        linear-gradient(#000 0 0) 50% / 100% max(0px, 100% - 2 * var(--squircle-r)) no-repeat,
        linear-gradient(#000 0 0) 50% / max(0px, 100% - 2 * var(--squircle-r)) 100% no-repeat;
    }
  }
}
@layer _.a {
  ._c2r73i {
    --squircle-r: 24px;
  }
}
@layer _.b {
  ._1xgz4ts:hover {
    --squircle-r: 2rem;
  }
}
```

## 浏览器

-   **土著** (单位:千美元)`css.properties.corner-shape.squircle`: Chrome139 (英语). Firefox和Safari只预览它; Playwright的WebKit建设已经拥有了.
-   **倒计时** 仅为 CSS 运行时间( X)`polyfills: ["css.properties.corner-shape", "css.properties.corner-shape.squircle"]`, (中文(简体) ), 所以只有在浏览器列表目标缺少功能时,它才出现在工作表中 `@supports not` 放在浏览器里 这是它。 内核 `requires` 警告是属于它的。 这需要 `mask` 与 `var()` 财务报告和审定财务报表 `min()`编号 :`max()` 大小: Firefox 75, Safari 15.4(灯光CSS没有前缀一个值与 `var()`) (中文(简体) ).
-   **已检查** 在克罗梅、火狐和WebKit中`bun run test:browsers`:一个盒子的角和边缘从一个 屏幕截图,只为Chrome 139的一栋建筑,为Firefox和Safari的一栋建筑 `corner-shape` 切开 (面具一个人). 在两者运行的地方,口罩的40px角是1600(Chrome)和0(WebKit)的原生一到2像素.

### 为什么是面具

-   A 类 **油漆工作表** (单位:千美元)[css-houdini- squircle (英语)](https://github.com/PavelLaptev/css-houdini-squircle), (中文(简体) ), [额外cs](https://github.com/una/extra.css)) 只在铬中运行,而铬有 `corner-shape` 现在:将涵盖否 缺少该功能的浏览器,它会传送一个脚本.
-   **平面 `border-radius`** 无成本( 浏览器下降) `corner-shape` 并保持半径,但角是 圆:在同一半径上,它沿着对角线(半径0.29对0.16)截取了近两倍的深 读作另一种形状.
-   **面具** 是形状本身,无论大小,没有脚本:超椭圆形的 SVG `|x|⁴ + |y|⁴ = 1` (单位:千美元)`corner-shape: squircle` 实值 `superellipse(2)`),曲线0.5%以内为四立方,以两次为四角 半径,以及 `linear-gradient` 他们之间 每个角地层是小盒子的一圈,所以他们 与波段结合是元素的相接;大小通过百分比跟随元素,没有测量.

## 规则

-   **`radius(<length-percentage [0,∞]>)`**,一次,可选(`1rem`) (中文(简体) ). 它设置 `--squircle-r`,所以它工作在一个 条件(`hover(squircle().radius("2rem"))`) (中文(简体) ). 每一方的百分比,如 `border-radius` (椭圆角); 半径超过半个盒子 被浏览器在原地夹住 `min(…, 100%)` 戴着面具.
-   **没有遗产.** 内核集 `--squircle-r` 所以另一只里面的一只小熊 拥有自己的半径.
-   **冲突.** `squircle()` 设置角: a `cn()` 拿着它,一个 `border-*radius` 或者说 `corner-*` 属性为 a 构建错误, 来源于内核( 写为样式) : `cssints: squircle: kernel core sets border-radius, corner-shape (this style also sets border-top-left-radius)`设置 半径为 `radius()`。 。 。 .
-   **错误** 语法,在类型和建设时间: `squircle.radius: unexpected "-4px" in "-4px", expected <length-percentage [0,∞]>`。 。 。 .

## 限制

-   **面具夹住外侧的外形.** 倒计时a `box-shadow`,一个 `outline` (焦点环)和 一个角落 `border` 被切:边框被平方画出并被口罩去修剪,因此在角上会变薄. 拿着 包件上的阴影( e)`filter: drop-shadow()` 随口而出,或内出一环. 原生道路将它们沿着 曲线.
-   一种形状:没有 `superellipse(k)` 平滑,没有光圈光度或形状。 面具是SVG的,另一个会 每个值成为另一个 SVG( 构建时间) `url()` 以定制的地产,等待使用.
-   `mask` 属于后退: a `mask` 自己用平板电脑替换掉头的.

```bash
cd packages/squircle && bun run test            # fixtures through the engine (output for both kinds of targets, conflicts, errors)
cd packages/squircle && bun run typecheck       # and the type test (test/types)
cd packages/squircle && bun run test:browsers   # Chrome, Firefox and WebKit through playwright-core
```

## 贷项

曲线为CSS边框和箱型装饰 第4级的上椭圆(CSS Borders and Box Dercorations Level 4)`corner-shape: squircle`) (中文(简体) ). 面具画了 这里; 没有复制 .

## 常见问题

### @cssints/squircle 是什么？

Csints的 Squircle 角: 本地角形: Squircle, 一个目标缺少的 CSS 口罩

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

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

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

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

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

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

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

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

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

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

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

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

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

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