APP_UI/图标/app项目替换/_圆角预览.html

<!doctype html>
<meta charset="utf-8">
<title>圆角切角对照 · C 泓池 / 深空蓝</title>
<style>
  :root{
    --bg:#0d1117; --panel:#161b22; --line:#26303d;
    --fg:#e6edf3; --dim:#8b949e; --gold:#F8C263;
  }
  *{box-sizing:border-box}
  body{margin:0;padding:40px 32px 72px;background:var(--bg);color:var(--fg);
       font:14px/1.6 -apple-system,"PingFang SC","Helvetica Neue",sans-serif}
  h1{font-size:20px;margin:0 0 4px;letter-spacing:.02em}
  .sub{color:var(--dim);margin:0 0 36px;font-size:13px}
  .sub code{background:#1f2630;padding:1px 6px;border-radius:4px;font-size:12px}
  section{border:1px solid var(--line);border-radius:14px;background:var(--panel);
          padding:22px 24px 26px;margin-bottom:22px}
  h2{font-size:15px;margin:0 0 2px;font-weight:600}
  h2 span{color:var(--dim);font-weight:400;font-size:12.5px;margin-left:8px}
  .note{color:var(--dim);font-size:12.5px;margin:6px 0 20px}
  .row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
  .cell{text-align:center}
  .cap{font-size:11.5px;color:var(--dim);margin-top:8px;letter-spacing:.03em}
  .plate{padding:18px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
  .dark{background:#0d1117;border:1px solid var(--line)}
  .light{background:#f5f7fa;border:1px solid #dde3ea}
  .checker{border:1px solid var(--line);
    background-image:linear-gradient(45deg,#2a3038 25%,transparent 25%),
                     linear-gradient(-45deg,#2a3038 25%,transparent 25%),
                     linear-gradient(45deg,transparent 75%,#2a3038 75%),
                     linear-gradient(-45deg,transparent 75%,#2a3038 75%);
    background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;background-color:#1b2027}
  img{display:block}
  .px{image-rendering:pixelated}
  .tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;
       border:1px solid var(--line);color:var(--dim);margin-left:8px;vertical-align:2px}
  .tag.on{color:#0d1117;background:var(--gold);border-color:var(--gold);font-weight:600}
  hr{border:0;border-top:1px solid var(--line);margin:22px 0}
  footer{color:var(--dim);font-size:12.5px;line-height:1.9}
  footer b{color:var(--fg);font-weight:600}
</style>

<h1>圆角切角对照 · C 泓池 / 深空蓝</h1>
<p class="sub">iOS 连续曲率 squircle 遮罩，R = 边长 × 22.37%。原方角图已存在 <code>_原始方角备份/</code>。</p>

<section>
  <h2>icon.png <span>1024×1024 · Expo 顶层 icon / Android 传统图标 / 启动页图</span></h2>
  <p class="note">iOS 走 <code style="background:#1f2630;padding:1px 5px;border-radius:4px">expo.icon</code> 分层包，不吃这张，所以带 alpha 不影响上架。</p>
  <div class="row">
    <div class="cell"><div class="plate dark"><img src="_原始方角备份/icon.png" width="160" height="160"></div><div class="cap">原始 方角</div></div>
    <div class="cell"><div class="plate dark"><img src="icon.png" width="160" height="160"></div><div class="cap">圆角 <span class="tag on">新</span></div></div>
    <div class="cell"><div class="plate light"><img src="icon.png" width="160" height="160"></div><div class="cap">浅底</div></div>
    <div class="cell"><div class="plate checker"><img src="icon.png" width="160" height="160"></div><div class="cap">透明通道</div></div>
    <div class="cell"><div class="plate dark" style="background:#1B4FD8"><img src="icon.png" width="76" height="76"></div><div class="cap">启动页 76px @ #1B4FD8</div></div>
  </div>
</section>

<section>
  <h2>android-icon-background.png <span>512×512 · 自适应背景层</span></h2>
  <p class="note">Android 自己的遮罩只露中间 72/108，四角本来就裁在外面 —— 设备上看不出差别，单看文件是圆角。</p>
  <div class="row">
    <div class="cell"><div class="plate dark"><img src="_原始方角备份/android-icon-background.png" width="140" height="140"></div><div class="cap">原始 方角</div></div>
    <div class="cell"><div class="plate dark"><img src="android-icon-background.png" width="140" height="140"></div><div class="cap">圆角 <span class="tag on">新</span></div></div>
    <div class="cell"><div class="plate light"><img src="android-icon-background.png" width="140" height="140"></div><div class="cap">浅底</div></div>
    <div class="cell"><div class="plate checker"><img src="android-icon-background.png" width="140" height="140"></div><div class="cap">透明通道</div></div>
  </div>
</section>

<section>
  <h2>favicon.png <span>48×48 · Web</span></h2>
  <p class="note">唯一一处圆角真正被用户看到的地方：浏览器标签页、书签、桌面快捷方式都不套系统遮罩。遮罩按 32 倍超采样再降到 48px，边缘不毛。</p>
  <div class="row">
    <div class="cell"><div class="plate dark"><img class="px" src="_原始方角备份/favicon.png" width="192" height="192"></div><div class="cap">原始 方角 · 4×放大</div></div>
    <div class="cell"><div class="plate dark"><img class="px" src="favicon.png" width="192" height="192"></div><div class="cap">圆角 · 4×放大 <span class="tag on">新</span></div></div>
    <div class="cell"><div class="plate light"><img class="px" src="favicon.png" width="192" height="192"></div><div class="cap">浅底 · 4×放大</div></div>
    <div class="cell"><div class="plate checker"><img class="px" src="favicon.png" width="192" height="192"></div><div class="cap">透明通道</div></div>
    <div class="cell"><div class="plate dark"><img src="favicon.png" width="48" height="48"></div><div class="cap">1:1 原大</div></div>
  </div>
</section>

<hr>
<footer>
  <b>没动的四件：</b>android-icon-foreground.png、android-icon-monochrome.png、splash-icon.png 是透明底的主体标记，没有底板，切圆角没有意义；expo.icon 由 iOS 系统自己套形状。<br>
  <b>角形参数：</b>连续曲率（非圆弧），直边在距角点 1.5287R 处收住，与 iOS 主屏图标遮罩一致。1024 → R 229.1px，512 → R 114.5px，48 → R 10.7px。
</footer>