轻松为你的 App 或网页截图添加真实感十足的 iPhone 弧形边框
以下是一个模拟 iPhone 截图带弧形边框的示例(使用普通图片演示):
只需使用简单的 HTML 和 CSS,即可为任意截图添加 iPhone 风格的弧形边框。
关键在于设置合适的 border-radius 值。iPhone 14/15 系列屏幕圆角约为 44px(以 390×844 分辨率为基准)。
<div class="iphone-frame">
<img src="your-screenshot.png" alt="App 截图" />
</div>
.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),以获得最佳视觉效果。