iPhone 截图边框弧形效果

轻松为你的 App 或网页截图添加真实感十足的 iPhone 弧形边框

效果预览

以下是一个模拟 iPhone 截图带弧形边框的示例(使用普通图片演示):

iPhone 截图示例

如何实现?

只需使用简单的 HTML 和 CSS,即可为任意截图添加 iPhone 风格的弧形边框。

关键在于设置合适的 border-radius 值。iPhone 14/15 系列屏幕圆角约为 44px(以 390×844 分辨率为基准)。

HTML 结构

<div class="iphone-frame">
  <img src="your-screenshot.png" alt="App 截图" />
</div>

CSS 样式

.iphone-frame {
  border-radius: 44px;
  overflow: hidden;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

💡 提示:确保截图尺寸比例接近真实 iPhone 屏幕(如 390×844 px),以获得最佳视觉效果。

更多功能More features
批量转换批量转换批量处理文件,支持docx/txt 降低AI率降低AI率用更自然的表达方式重写内容 改写建议改写建议看看同一句话还能怎么说