如何为图像添加边框和阴影 - CSS 与工具技巧
为图像添加边框和阴影的目的
边框和阴影是提升图像视觉表现力的基本手段。它们的作用包括：将图像与周围内容区分开来（特别是白色背景图像在白色页面上时）、创造深度感和层次感、引导用户视线聚焦到图像上、统一页面的视觉风格。
适当的边框和阴影让图像看起来更精致、更有"设计感"。但过度使用会适得其反 - 过粗的边框显得笨重，过重的阴影显得不自然。现代设计趋势倾向于微妙、轻柔的效果。
选择边框还是阴影取决于设计风格：扁平设计（Flat Design）倾向使用细边框；材质设计（Material Design）使用分层阴影表示高度；玻璃态设计（Glassmorphism）使用模糊阴影和半透明边框。
使用 CSS 实现边框
CSS 提供了丰富的边框样式选项。
基本边框：border: 1px solid #e0e0e0; 创建细灰色边框。对于浅色图像在白色背景上的场景非常有效。边框颜色选择比背景稍深的灰色（如 #e0e0e0 或 #d0d0d0）最为自然。
圆角：border-radius: 8px; 添加圆角使图像更柔和。完全圆形使用 border-radius: 50%;（需要图像为正方形）。不同角可以设置不同半径创造不对称效果。
多重边框：使用 outline 或 box-shadow 创建多层边框效果。box-shadow: 0 0 0 4px #fff, 0 0 0 6px #333; 创建白色内框 + 深色外框的双层效果。
渐变边框：使用 border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; 创建渐变色边框。或使用背景渐变 + padding 的技巧实现圆角渐变边框。
响应式边框：使用相对单位（em、vw）使边框随容器缩放。避免在小屏幕上使用过粗的边框。
使用 CSS 实现投影阴影
box-shadow 是为图像添加阴影的主要 CSS 属性。
基本阴影：box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 创建轻柔的底部阴影。参数依次为：水平偏移、垂直偏移、模糊半径、颜色（含透明度）。
多层阴影：叠加多个阴影创造更自然的深度感：box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);。近处的阴影小而清晰，远处的阴影大而模糊，模拟真实光照。
内阴影：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 创建凹陷效果。适合创造"嵌入"感的图像容器。
彩色阴影：使用图像的主色调作为阴影颜色：box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);。创造图像"发光"的效果，增强视觉吸引力。
drop-shadow 滤镜：filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); 与 box-shadow 不同，它会沿着图像的实际轮廓（包括透明区域）投射阴影。适合 PNG 透明图像。
高级 CSS 技巧 - 悬停效果与动画
结合过渡和动画，让边框和阴影在交互时产生动态变化。
悬停提升效果：img { transition: transform 0.3s, box-shadow 0.3s; } img:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }。图像在悬停时"浮起"，阴影加深，创造立体感。
边框颜色过渡：img { border: 2px solid transparent; transition: border-color 0.3s; } img:hover { border-color: #4ecdc4; }。悬停时边框从透明变为彩色，提供视觉反馈。
缩放与阴影联动：img:hover { transform: scale(1.05); box-shadow: 0 16px 32px rgba(0,0,0,0.2); }。放大时阴影同步增大，保持视觉一致性。
性能注意：transform 和 opacity 的动画由 GPU 加速，性能最好。避免动画 border-width（会触发重排）。使用 will-change: transform 提示浏览器优化。尊重 prefers-reduced-motion 设置。
在设计工具中添加边框和阴影
设计工具提供了可视化的边框和阴影编辑能力。
Figma：选中图像帧 → 右侧面板的 Effects 添加 Drop Shadow 或 Inner Shadow。支持多层阴影叠加。Stroke 面板添加边框，支持内侧、外侧和居中对齐。可以导出为 CSS 代码。
Photoshop：图层样式（Layer Style）→ 投影（Drop Shadow）/ 描边（Stroke）。支持精细的混合模式和等高线控制。适合创建复杂的视觉效果。
CSS 生成器：在线工具如 cssgenerator.org、shadows.brumm.af 提供可视化的阴影编辑器，实时预览并生成 CSS 代码。适合快速实验不同效果。
设计系统中的标准化：定义 3-5 级阴影层次（如 shadow-sm、shadow-md、shadow-lg），在整个项目中统一使用。Tailwind CSS 提供了预定义的阴影工具类。
设计最佳实践与注意事项
边框和阴影的使用需要遵循设计原则。
一致性：同一页面上的图像使用统一的边框和阴影样式。混合使用不同风格会显得杂乱。在设计系统中定义标准并严格遵循。
适度原则：阴影的模糊半径和偏移量不宜过大。现代设计倾向于微妙的阴影（模糊 4-12px，透明度 0.05-0.15）。过重的阴影看起来像 2010 年代的过时设计。
暗色模式适配：浅色背景上的阴影在暗色模式下可能不可见或效果相反。暗色模式下考虑使用更深的背景色差异或微弱的亮色边框替代阴影。
无障碍考虑：边框不应是传达信息的唯一方式（色盲用户可能无法区分颜色）。确保图像即使没有边框和阴影也能被正确理解。
性能影响：大量使用 box-shadow 和 filter: drop-shadow 可能影响滚动性能。对于长列表中的图像，考虑使用 content-visibility: auto 延迟渲染视口外的阴影效果。