iPhone 图标阴影设置教程

在 iOS 系统中，应用图标通常带有柔和的阴影效果，使界面更具层次感和现代感。本页面将介绍如何使用原生 CSS 为网页中的图标模拟 iPhone 图标阴影效果。

实现这种效果的关键在于合理使用 box-shadow 属性。以下是一个典型的 CSS 样式代码：

.icon {
  width: 80px;
  height: 80px;
  background-color: #007aff;
  border-radius: 18px; /* iOS 图标圆角 */
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

你可以根据实际需求调整阴影的颜色、模糊半径和偏移量，以匹配不同主题或品牌风格。注意保持阴影柔和自然，避免过度夸张影响视觉体验。