CSS 阴影效果完全指南
引言
CSS 阴影是创建视觉深度和层次感的强大工具。本文将深入探讨各种阴影类型和高级技巧，帮助你创建令人印象深刻的视觉效果。
基础概念回顾
阴影类型
- box-shadow: 盒子阴影
- text-shadow: 文字阴影
- drop-shadow: 滤镜阴影
基本语法
/* box-shadow */ .element { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } /* text-shadow */ .text { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } /* filter: drop-shadow */ .element { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); }高级技巧一：box-shadow
基础语法
box-shadow: h-offset v-offset blur spread color inset;基础阴影
.box { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }多层阴影
.box { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }内阴影
.box { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }彩色阴影
.box { box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }扩散阴影
.box { box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3); }高级技巧二：text-shadow
基础文字阴影
.text { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }发光效果
.text { text-shadow: 0 0 10px rgba(102, 126, 234, 0.8); }多层文字阴影
.text { text-shadow: 0 0 5px rgba(102, 126, 234, 0.8), 0 0 10px rgba(102, 126, 234, 0.6), 0 0 20px rgba(102, 126, 234, 0.4); }文字描边效果
.text { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }高级技巧三：drop-shadow 滤镜
基础用法
.element { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); }与 box-shadow 的区别
/* box-shadow 会给整个盒子添加阴影 */ .box-shadow { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } /* drop-shadow 会跟随内容的形状 */ .drop-shadow { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); }透明图像阴影
img { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }实战案例：卡片阴影
.card { padding: 1.5rem; background: white; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.05); } .card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.1); }实战案例：按钮阴影效果
.btn { padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: transform 0.2s, box-shadow 0.2s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); } .btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4); }实战案例：发光效果
.glow { width: 200px; height: 200px; background: radial-gradient(circle, #667eea, #764ba2); border-radius: 50%; box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 40px rgba(102, 126, 234, 0.3), 0 0 60px rgba(102, 126, 234, 0.2); }实战案例：浮雕效果
.emboss { padding: 2rem; background: #f5f5f5; box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8), inset -2px -2px 4px rgba(0, 0, 0, 0.1); }实战案例：3D 效果
.cube { width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transform: rotateX(15deg) rotateY(15deg); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), inset 1px 1px 2px rgba(255, 255, 255, 0.2); }实战案例：霓虹效果
.neon { font-size: 48px; font-weight: bold; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 55px #ff00ff, 0 0 75px #ff00ff; }常见问题与解决方案
Q1：阴影不显示？
A：确保元素有背景色：
.element { background: white; /* 需要背景色 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }Q2：多层阴影顺序？
A：先定义的阴影在底层：
.box { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), /* 底层 */ 0 4px 8px rgba(0, 0, 0, 0.1); /* 上层 */ }Q3：如何创建单侧阴影？
A：使用负扩展值：
/* 底部阴影 */ .bottom-shadow { box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.3); }最佳实践
1. 使用 CSS 变量
:root { --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1); } .card { box-shadow: var(--shadow-md); }2. 保持一致性
/* 统一的阴影风格 */ button, .card, .dialog { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }3. 考虑性能
/* 避免过大的模糊半径 */ .box { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 推荐 */ /* box-shadow: 0 0 100px rgba(0, 0, 0, 0.1); 不推荐 */ }总结
CSS 阴影是创建视觉效果的强大工具。通过本文的学习，你应该能够：
- 使用 box-shadow 创建盒子阴影
- 使用 text-shadow 创建文字阴影
- 使用 drop-shadow 创建滤镜阴影
- 创建多层阴影效果
- 实现各种视觉效果（发光、浮雕、霓虹等）
掌握这些技巧，能够帮助你创建更加吸引人的视觉效果。
