通过css的box-shadow结合媒体查询和相对单位实现响应式阴影。1. 基础卡片设置默认阴影及悬停效果，使用rgba控制透明度并添加过渡动画；2. 移动端通过媒体查询降低阴影模糊半径与透明度，提升轻盈感；3. 采用rem等相对单位使阴影随字体缩放自适应；4. 利用CSS自定义属性配合prefers-color-scheme实现暗色模式适配与统一管理。合理调控阴影参数可确保多设备下视觉自然流畅。
要实现响应式卡片阴影效果，关键是让阴影在不同设备上看起来自然且不突兀。可以通过 CSS 的 box-shadow 结合媒体查询和相对单位来动态调整阴影表现，适配移动端和桌面端。
1. 基础卡片结构与默认阴影
先定义一个基础卡片容器，并设置平滑的默认阴影：
.card { width: 90%; max-width: 300px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } .card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
这里使用了 rgba 控制阴影透明度，避免在浅色背景上过于生硬，同时加入 transition 实现悬停动画。
2. 使用媒体查询适配移动设备
在小屏幕上，过重的阴影会影响性能和视觉体验，应适当减弱：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) { .card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); border-radius: 10px; } .card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); } }
通过降低模糊半径和颜色透明度，使移动端阴影更轻盈，提升页面流畅感。
3. 利用相对单位增强响应性
使用 rem 或 em 可让阴影随字体缩放而变化，更适合响应式布局：
.card { font-size: 1rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); }
这样当根字体大小随屏幕调整时，阴影也会按比例变化，保持整体协调。
4. 高级技巧：动态深度与暗色模式适配
结合 CSS 自定义属性（变量）可进一步提升灵活性：
:root { --shadow-light: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15); } @media (prefers-color-scheme: dark) { :root { --shadow-light: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.4); } } .card { box-shadow: var(--shadow-light); } .card:hover { box-shadow: var(--shadow-hover); }
这样既能响应用户系统偏好，又能统一管理阴影样式，便于维护。
基本上就这些。合理控制阴影强度、利用媒体查询和 CSS 变量，就能做出自然流畅的响应式卡片阴影效果。不复杂但容易忽略细节。
暂无评论