Screenshot美化：纯 CSS 生成截图边框圆角阴影代码

使用方法

1. 打开页面默认就带一套参数：设备框「无」、圆角 16、边框 8、阴影 24、内边距 24、背景 #eef2ff，预览区与下方 CSS 代码都已生成，不需要你先输入任何东西。
2. 在「设备框」里选无、iPhone 或 Mac 窗口；调圆角、边框、阴影、内边距与背景色，预览区会实时变化，代码区同步更新。
3. 在任意数字输入框按回车都会立即重算，不必点「生成样式」按钮；说明文字框支持 Ctrl 或 Cmd 加回车触发。
4. 把生成的 CSS 复制到你的样式表，给截图外层容器加上 class="screenshot" 即可套用同一套边框圆角阴影。
5. 点「复制 CSS」把当前代码复制到剪贴板，可直接粘进项目样式或设计稿标注里。
6. 本页不联网、不写本地存储，刷新即回到默认参数，所有样式都在你自己的浏览器里拼出来，且全程不读取图片。

这个 Screenshot美化能解决什么

写博客、做产品文档或发社交动态时，原始截图往往边角生硬、风格不齐，一张张手动加圆角描边又慢又不一致。Screenshot美化（截图美化）把「边框、圆角、阴影、内边距、背景」参数化，生成一份可复用的 CSS，全站截图瞬间统一，省去每次对着设计软件调。

第一类用途是博客与教程配图。技术文章里截图很多，统一加圆角与淡阴影后版面更干净；本工具生成的 CSS 直接贴进站点样式，一改全改。

第二类用途是产品文档与官网。功能截图加设备框（iPhone 或 Mac 窗口）更有「真机感」，比裸图更专业，也更容易通过设计评审。

第三类用途是社交分享卡片。把截图做成带衬底与阴影的卡片，发朋友圈、公众号或海报都更吸睛，且纯 CSS 不损原图清晰度。

第四类用途是设计交付标注。设计师把参数交给前端，前端按生成的 CSS 落地，避免「看着差不多」的反复返工。本工具全程本地生成，不读取你电脑里的任何图片，隐私友好。

第五类用途是课程与培训讲义。老师把软件操作步骤截图统一美化，学生一眼能区分界面与注解，降低认知负担；本工具让批量截图风格一致，不必逐张手工修。

第六类用途是个人作品集与简历。把项目截图做成带衬底的小卡片，排版更精致，也比直接贴裸图更显用心，且纯 CSS 不损原图分辨率。

原理和变量

Screenshot美化（截图美化）的原理是「参数映射到 CSS 属性」：圆角半径映射到 border-radius，边框宽度映射到 border 的粗细，阴影模糊映射到 box-shadow 的模糊半径（偏移量按模糊的一半取，保证投影自然），内边距映射到 padding，背景色映射到 background。设备框只是给这套属性加一层语义注释与可选的额外外框，并不改变底层四个核心属性的计算。因为全部是确定性的线性映射，同一组参数永远得到同一段 CSS，方便团队沉淀成设计 token。

关于 box-shadow 的透明度，本工具固定用 rgba(0,0,0,.18)，即黑色 18% 不透明度的柔和投影；若你想要更重或更淡的阴影，复制代码后把 .18 改成更大或更小的数即可，偏移与模糊仍由参数决定，不会被写死。

完整示例

默认示例：设备框无、圆角 16、边框 8、阴影 24、内边距 24、背景 #eef2ff。页面据此生成「border-radius:16px、border:8px solid #ffffff、box-shadow:0 12px 24px rgba(0,0,0,.18)、padding:24px、background:#eef2ff」五条规则，预览区随即呈现带白边与淡阴影的卡片。下面用卡片把三个最常用的参数组合列出，方便你照抄；设备框选项仅在生成代码里附加注释，不改变核心属性计算。

如果你选了 iPhone 或 Mac 设备框，生成代码末尾会多一行注释，提醒你可在此基础上加更粗的外框或窗口标题栏；核心五条属性不变，所以同一份参数无论选哪种设备框，截图主体样式都完全一致，便于跨设备统一风格而不产生分支。

示例 CSS（默认参数）
.screenshot {
  border-radius: 16px;
  border: 8px solid #ffffff;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  padding: 24px;
  background: #eef2ff;
}

设备框尺寸参考对照表

下表给出常见设备的大致渲染尺寸与建议圆角，供你选设备框与调圆角时参考。尺寸指典型 CSS 像素，真实机型以官方规范为准。表格共 14 行，默认展示前 12 行，点「加载更多」展开剩余两行；点「复制表格」导出制表符分隔文本，点「导出 CSV」下载带 BOM 的表格。

结果边界与错误提示

• 圆角半径留空或填非数字时，提示会点名当前值「圆角半径「」不合法：必须是数字」，页面不会自作主张用 0 去套样式。
• 圆角半径超过 100 时，提示「圆角半径「」不合法：最多 100 px」，避免离谱大圆角把图片缩成圆点。
• 边框宽度、阴影模糊、内边距同理有各自的范围（40、100、120），越界或非数字都会点名具体字段与当前值报错，而不是静默截断。
• 背景色不是合法十六进制（不是 # 加六位 0-9a-f）时，提示「背景色「」不合法：应为 #RRGGBB」，不会拿错误颜色硬填预览。
• 说明文字留空时，预览里的说明行会自动隐藏而不是报错，保证预览始终能渲染。
• 结果区与错误区都带 role="alert" 语义，内容一变就会被屏幕阅读器播报；所有样式本地生成，不联网也不写存储，刷新即还原默认参数。
• 「导出 CSV」会在文件头写入 BOM，Excel 打开中文不会乱码；复制表格走制表符分隔，两种导出都不会额外加 BOM 之外的杂质。
• 本工具只生成 CSS 与预览，不读取、不修改任何图片文件；若你需要裁剪或压缩真实图片，请用专门的图片处理工具。
• 说明文字虽可留空，但它不参与任何 CSS 计算，只作为预览里的可读标签；留空时预览自动隐藏该行，不影响生成的样式代码。
• 设备框选择不影响核心属性计算，因此切换设备框不会产生非法输入，也不会触发错误提示，可放心在三种框之间来回切换对比。

常见问题

相关工具

• 图片裁剪：真正裁剪图片尺寸，和本工具的边框美化互补。
• 图片尺寸调整：按目标尺寸缩放图片，配合统一截图风格。
• 图片压缩工具：压缩图片体积，让美化后的截图更轻量。