G2-CDN 文档

一、接入

在页面里引一个 JS 文件，然后直接写 <g2-corner> 标签。零依赖，Shadow DOM 隔离样式，不跟你现有 CSS 打架。

CDN 引入

<script src="https://g2.goose.cc.cd/g2-cdn.js"></script>

写标签

<g2-corner n="5" fill="#ffffff" stroke="#007aff" stroke-width="2" padding="16">
  这里放任意内容
</g2-corner>

组件内部用 SVG 超椭圆渲染 G2 连续曲率轮廓，内容自动被 clip-path 裁成同一条曲线——图片、文字、HTML，塞什么裁什么。

二、属性速查

全部属性都是可选的，不写就走默认值。

属性	类型	默认值	说明
`n`	数字	5	方度。2=椭圆，越大越方。推荐 4~8。
`width`	数字	自适应	宽度（px）。不设则撑满父容器。
`height`	数字	自适应	高度（px）。不设则撑满父容器。
`fill`	颜色	transparent	填充色。支持任意 CSS 颜色值。
`gradient`	字符串	无	渐变填充。格式："角度,#色1,#色2,..."。例："135,#ff9500,#ff375f"。设了则覆盖 fill。
`stroke`	颜色	无	描边颜色。
`stroke-width`	数字	0	描边宽度（px）。
`padding`	数字	0	内边距（px）。内容距离形状边缘的距离。
`blur`	数字	0	毛玻璃模糊量（px）。0=关。需背后有内容才显形。
`glass-color`	颜色	rgba(255,255,255,0.15)	毛玻璃层底色。仅在 blur>0 时生效。

注意：blur 毛玻璃需要背后有可见内容才能看到模糊效果。如果 fill 设了不透明色，毛玻璃会被挡住。想让毛玻璃明显，建议 fill 设 transparent 或半透明色，并在组件背后放内容（如图片、渐变背景）。

三、典型场景

头像底

<g2-corner width="90" height="90" n="4" fill="#007aff"></g2-corner>

按钮

<g2-corner width="140" height="48" n="6" fill="#ff9500" padding="0">
  <div style="color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;height:100%">
    按钮
  </div>
</g2-corner>

卡片容器

<g2-corner n="5" fill="#ffffff" stroke="#e2e2e6" stroke-width="1" padding="20">
  <h3>卡片标题</h3>
  <p>卡片正文。任意 HTML 都行。</p>
</g2-corner>

图片卡片（图片被裁成 G2 形状）

<g2-corner width="300" height="200" n="5" padding="0" fill="#ffffff" stroke="#007aff" stroke-width="2">
  <img src="你的图片.jpg" style="width:100%;height:100%;object-fit:cover;display:block" alt="">
</g2-corner>

padding=0 让图片铺满形状边缘。想要留白边就加 padding，图片会自动缩进。

渐变填充

<g2-corner width="200" height="120" n="5" gradient="135,#ff9500,#ff375f" padding="16">
  <div style="color:#fff;font-weight:700">渐变卡片</div>
</g2-corner>

毛玻璃卡（blur）

<div style="background:linear-gradient(135deg,#ff9500,#ff375f);padding:26px;border-radius:10px">
  <g2-corner width="230" height="130" n="5" blur="12" padding="16">
    <div style="color:#fff;font-weight:700">毛玻璃卡</div>
  </g2-corner>
</div>

关键：blur 组件外面必须包一层有内容的容器（如渐变背景），毛玻璃才能糊出效果。fill 默认 transparent 即可。

套任意 HTML（图表 / iframe / 地图）

<g2-corner width="400" height="300" n="5" fill="#ffffff" stroke="#e2e2e6" stroke-width="1" padding="0">
  <iframe src="https://example.com/map" style="width:100%;height:100%;border:none"></iframe>
</g2-corner>

任何块级内容塞进 slot，都会被裁成 G2 形状。ECharts 图表、地图 iframe、视频封面，通吃。

四、原理

组件内部用 SVG 超椭圆（Lamé 曲线）渲染轮廓：

|x / a|^n + |y / b|^n = 1

n=2 是椭圆，n 越大越接近矩形。和 CSS border-radius 的区别：

border-radius = 圆弧 + 直线相切（G1 连续）。切点处曲率从 1/r 瞬间跳到 0，肉眼能看出角上那个"鼓包"。
g2-corner = 整条轮廓都是同一条连续曲率曲线（G2 连续）。没有切点，没有曲率跳变，苹果图标同款丝滑。

六、部署为 CDN

组件是单文件 g2-cdn.js，零依赖。丢到任意静态托管即可。

当前官方 CDN：https://g2.goose.cc.cd/g2-cdn.js（Cloudflare Pages + 自定义域）。

你也可以自己托管：

Cloudflare Pages：拖进 Pages 项目，绑自定义域
GitHub + jsDelivr：推仓库，用 https://cdn.jsdelivr.net/gh/用户名/仓库/g2-cdn.js
Supabase Storage：上传到公开 bucket
任意静态空间：Netlify、Vercel、OSS + CDN

文档