iPhone 来电灰色弹窗样式详解

设计特点

iPhone 的来电弹窗采用深灰色半透明背景（rgba(30, 30, 30, 0.92)），配合 backdrop-filter: blur(20px) 实现毛玻璃效果，这是 iOS 系统标志性视觉语言之一。

按钮采用大尺寸圆形设计，绿色接听、红色拒接，符合用户直觉操作。文字使用系统默认字体（San Francisco），确保清晰易读。

前端实现要点

使用原生 HTML/CSS 即可高度还原该效果，关键在于：

• 使用 position: absolute 定位弹窗于屏幕底部
• 设置圆角（border-radius）和内边距营造 iOS 风格
• 通过 backdrop-filter 实现背景模糊（注意 Safari 兼容需加 -webkit- 前缀）
• 使用系统字体栈保证跨平台一致性

应用场景

此类弹窗常用于 Web 应用中模拟系统级通知、权限请求或紧急操作提示，能有效吸引用户注意力并提供清晰的操作路径。