图片加圆角：圆形/圆角透明 PNG 生成教程
方形图片显得生硬，圆角图片更柔和现代。从 iOS 图标到 Material Design，从微信头像到网页卡片，圆角无处不在。本文讲清楚圆角图片的几种形式、在线制作方法和 CSS 实现方案。
圆角图片的四种形式
1. 圆角矩形（最常见）
四个角变圆，其余方形。
- 圆角半径：5px（微圆角）、12px（标准）、20px（大圆角）、50%（完全圆）
- 场景：卡片、缩略图、按钮、APP 图标
2. 完全圆形
整个图片变圆形，用于头像。
- 实现：圆角 = 宽高的一半（或 50%）
- 场景：用户头像、Logo、勋章
3. 胶囊形
两端半圆，中间矩形，像药丸。
- 实现：圆角 = 高度的一半
- 场景：标签、按钮、进度条
4. 不规则圆角
四个角圆角不同，如只有顶部两个角圆。
- 场景：卡片顶部图（顶圆底直）、特殊设计
4 款圆角工具对比
1. 52tool.net 图片圆角工具（综合首选）
工具地址：图片加圆角
- 价格：免费
- 功能：圆角矩形、完全圆形、胶囊形、不规则圆角
- 特点：浏览器端处理，图片不上传
- 导出：PNG（支持透明）、JPG
- 自定义：圆角半径 0-100px、四角独立设置
2. 52tool.net 图片裁剪
工具地址：图片裁剪
- 配合：先裁剪到目标尺寸，再加圆角
3. 52tool.net CSS 圆角生成器
工具地址：CSS 圆角生成器
- 用途：网页元素圆角（不是图片本身）
- 输出：CSS 代码
4. 52tool.net AI 抠图
工具地址：AI 抠图
- 用途：去背景后做透明 PNG 贴纸
- 配合：抠图 + 圆角 = 任意形状贴纸
实战教程：做圆角矩形图片
场景
博客文章的配图想加 12px 圆角，让排版更柔和。
步骤 1：打开工具
进入 52tool 图片圆角工具。
步骤 2：上传图片
点击"上传"或拖拽图片到页面。
步骤 3：设置圆角
- 模式：圆角矩形
- 半径：12px（标准圆角）
- 四角：四角统一
步骤 4：设置背景
- 透明背景：勾选（导出 PNG 才支持透明）
- 背景色：可选白色、黑色、自定义色
如果要在白色背景的网页上用，选"白色背景"也行（JPG 即可）。如果要在不同背景上复用，选透明背景（必须 PNG）。
步骤 5：预览
工具显示圆角效果。圆角外区域透明（显示棋盘格）或填充背景色。
步骤 6：下载
选 PNG 格式下载（保留透明）。JPG 不支持透明，圆角外会填白。
步骤 7：应用到博客
把圆角 PNG 插入 Markdown：
圆角效果自然呈现。
实战教程：做圆形头像
场景
做一张圆形头像 PNG，用于论坛、个人网站、简历。
步骤 1：准备正方形原图
圆形头像要求原图是 1:1 正方形，否则圆形会变椭圆。用 图片裁剪 先裁成 1:1。
步骤 2：上传到圆角工具
打开 52tool 圆角工具，上传正方形图片。
步骤 3：选完全圆形
- 模式：完全圆形（或圆角矩形 + 半径设为图片宽度的一半）
- 背景：透明
步骤 4：下载 PNG
下载 PNG，得到透明背景的圆形头像。
步骤 5：在不同场景使用
- 白色背景网页：圆形外透明，自然融入
- 深色背景网页：同样透明融入
- 文档简历：插入 PNG，圆形显示
- 微信头像：直接上传 PNG，微信会自动处理成圆形
替代方案：CSS 实现圆形
如果是网页用，不需要预先做圆形 PNG。用 CSS：
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
优点：原图保持方形（更灵活），显示时变圆；改主题时不用重做图片。
实战教程：做不规则圆角
场景
做一个卡片顶部图，只有上面两个角圆角，下面两个直角。
步骤 1：上传图片
打开 52tool 圆角工具。
步骤 2：自定义四角
- 左上：12px
- 右上：12px
- 左下：0px
- 右下：0px
步骤 3：透明背景
勾选透明背景。
步骤 4：下载 PNG
得到顶部圆角、底部直角的图片，用于卡片顶部。
配合 CSS
如果网页用，CSS 更方便：
.card-image {
border-radius: 12px 12px 0 0; /* 上圆下直 */
}
实战教程：做透明贴纸
场景
做一个产品 Logo 贴纸，背景透明，可以贴到任何图上。
步骤 1：去背景
打开 52tool AI 抠图，上传带背景的产品图，自动去背景，下载透明 PNG。
步骤 2：加圆角（可选）
如果产品图是矩形，可以用圆角工具加圆角，让边缘柔和。
步骤 3：合成到其他图
用 图片合并 把贴纸合成到目标图上。
CSS 圆角方案（开发者推荐）
如果是网页开发，优先用 CSS 而不是预先做圆角图片。
基础圆角
.image {
border-radius: 12px;
}
圆形
.avatar {
border-radius: 50%;
}
不规则圆角
.top-rounded {
border-radius: 12px 12px 0 0; /* 上左 上右 下右 下左 */
}
椭圆圆角
.ellipse {
border-radius: 50% / 30%; /* 横向 50%，纵向 30% */
}
配合渐变边框
.gradient-border {
border-radius: 16px;
padding: 2px;
background: linear-gradient(135deg, #667eea, #764ba2);
}
.gradient-border img {
border-radius: 14px;
display: block;
}
用 CSS 圆角生成器
手写 border-radius 参数容易搞错。用 52tool CSS 圆角生成器 可视化调整，实时预览，复制代码。
圆角设计原则
1. 圆角半径要统一
整个项目里圆角半径统一（如都是 8px 或都是 12px），不要这张图 8px、那张图 16px，看起来杂乱。
2. 圆角大小对应尺寸
- 小元素（按钮、标签）：4-8px
- 中元素（卡片、缩略图）：8-16px
- 大元素（容器、弹窗）：16-24px
- 头像、图标：50%（完全圆）
3. 圆角风格跟随平台
- iOS：大圆角（16-20px），苹果风格
- Material Design：中等圆角（8-12px），谷歌风格
- Windows 11：大圆角（8-12px），微软新风格
- 传统企业：小圆角（2-4px），稳重
4. 注意圆角内的内容
圆角会裁掉四角内容。如果图片四角有重要信息（如文字、Logo），圆角太大会切掉。要么减少圆角半径，要么调整内容位置。
5. 圆角和阴影搭配
圆角图片配阴影更立体：
.card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
阴影生成用 CSS 阴影生成器。
圆角的特殊应用
1. Favicon 圆角
现代浏览器的 Favicon 自动加圆角（如 iOS Safari、Chrome）。做 Favicon 时预先圆角化能控制效果。用 Favicon 生成器 一键生成多尺寸圆角 Favicon。
2. APP 图标
iOS/Android APP 图标都要求圆角（iOS 是超椭圆）。提交应用商店时，提交方形原图，系统自动加圆角。但如果要展示效果，预先圆角化。
3. 社交分享图
OpenGraph 图片在社交平台分享时，有的平台会加圆角（如微信卡片）。预先圆角化能避免平台处理不一致。
4. 头像边框
圆形头像加边框增强视觉：
.avatar {
border-radius: 50%;
border: 3px solid #2563eb;
}
常见问题解答
Q: 为什么我的圆角图片在白色背景上有白边？
A: 你下载的是 JPG 格式，JPG 不支持透明，圆角外区域填了白色。要透明背景必须用 PNG。用 52tool 圆角工具 时勾选"透明背景"，下载选 PNG。
Q: 圆角图片体积变大怎么办？
A: PNG 透明图比 JPG 大。优化方法：1) 用 图片压缩 压缩；2) 转 WebP 格式（支持透明 + 体积小），用 WebP 转换；3) 网页用 CSS 圆角，不预先做圆角图。
Q: CSS border-radius 不生效？
A: 检查：1) 元素是否有 overflow: hidden（圆角生效但内容溢出）；2) 是否被 border-image 覆盖；3) 元素是否是 SVG（SVG 用 rx ry 属性）；4) 浏览器是否太老（IE8 不支持，2026 年基本无问题）。
Q: 圆形头像里的人脸变形了？
A: 原图不是正方形，被强行 border-radius: 50% 后变椭圆。解决：1) 先用 裁剪工具 裁成 1:1；2) CSS 加 object-fit: cover 让图片填满容器不变形。
Q: 怎么做"超椭圆"（Squircle）圆角？
A: 超椭圆是 iOS 图标用的特殊圆角，比普通圆角更平滑。CSS 标准暂不支持，可以用 SVG mask 或 clip-path 实现。简单方案用 border-radius: 22% 近似。
Q: 圆角能做动画吗？
A: 可以。border-radius 支持过渡：
.card { border-radius: 12px; transition: border-radius 0.3s; }
.card:hover { border-radius: 20px; }
鼠标悬停时圆角变大，有微动效。
总结
圆角图片是现代 UI 的基础元素。52tool.net 图片圆角工具免费、本地处理、支持圆角矩形/圆形/不规则圆角，覆盖所有场景。
记住三条：
- 网页优先用 CSS：
border-radius灵活、可复用、不破坏原图 - 透明背景用 PNG：JPG 不支持透明
- 圆角统一：整个项目圆角半径一致，视觉协调
需要做 Favicon 圆角图标，用 Favicon 生成器；需要 CSS 圆角代码，用 CSS 圆角生成器。
