pin_drop当前位置:知识文库 ❯ 图文
CSS集成：CSS阴影详解 - box-shadow与text-shadow使用指南
CSS 阴影为元素和文字添加深度感与层次感，是提升界面视觉品质的重要手段。box-shadow 为元素盒子添加阴影，text-shadow 为文字添加阴影。两者都支持多重阴影叠加，可以创造出丰富的光影效果。本教程将详细讲解阴影属性的语法、各种阴影效果以及创意应用。
目录
一、box-shadow 语法详解
box-shadow 属性用于为元素添加阴影效果，其完整语法包含 6 个参数：
代码示例
box-shadow: offset-x offset-y blur spread color inset;
/* 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 内阴影 */二、text-shadow 语法详解
text-shadow 用于为文字添加阴影，语法比 box-shadow 更简洁，不支持 spread 和 inset：
代码示例
text-shadow: offset-x offset-y blur color;
/* 水平偏移 垂直偏移 模糊半径 颜色 */提示：text-shadow 支持多重阴影叠加，用逗号分隔多组参数即可实现发光、霓虹等创意效果。
三、box-shadow 基础示例
下面通过一组卡片演示不同参数的 box-shadow 效果，从微阴影到大阴影、从外阴影到内阴影、从柔和到硬边：
代码示例
<style>
.shadow-card { background: white; padding: 30px 20px; border-radius: 10px; text-align: center; }
.s1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* 微阴影 */
.s2 { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } /* 小阴影 */
.s3 { box-shadow: 0 8px 16px rgba(0,0,0,0.1); } /* 中阴影 */
.s4 { box-shadow: 0 16px 32px rgba(0,0,0,0.1); } /* 大阴影 */
.s5 { box-shadow: 0 2px 10px rgba(0,0,0,0.08); } /* 柔和阴影 */
.s6 { box-shadow: 0 4px 15px rgba(0,0,0,0.1); } /* 扩散阴影 */
.s7 { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); } /* 内阴影 */
.s8 { box-shadow: 4px 4px 0 #3498db; } /* 硬阴影 */
.s9 { box-shadow: 0 0 0 3px #3498db; } /* 描边阴影 */
.s10 { box-shadow: 0 2px 4px rgba(0,0,0,0.1),
0 8px 24px rgba(0,0,0,0.08); } /* 多层阴影 */
.hover-card { transition: box-shadow 0.3s, transform 0.3s; cursor: pointer; }
.hover-card:hover {
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
transform: translateY(-4px);
}
</style>
<div class="shadow-card s1">微阴影</div>
<div class="shadow-card s4">大阴影</div>
<div class="hover-card">悬停查看阴影变化</div>四、text-shadow 创意效果
1. 发光效果
通过多层同色模糊阴影叠加，可以创建柔和的发光效果，常用于深色背景上的强调文字：
代码示例
.ts-glow {
font-size: 28px;
color: #64ffda;
text-shadow: 0 0 10px rgba(100,255,218,0.5),
0 0 20px rgba(100,255,218,0.3),
0 0 40px rgba(100,255,218,0.1);
}2. 霓虹效果
霓虹灯效果使用更密集的同色阴影层，模糊半径从小到大递增，模拟霓虹灯管的光晕扩散：
代码示例
.ts-neon {
font-size: 28px;
color: #ff6b9d;
text-shadow: 0 0 7px #ff6b9d,
0 0 10px #ff6b9d,
0 0 21px #ff6b9d,
0 0 42px #ff2d95;
}3. 3D 立体文字
通过逐层增加偏移量并在最底层添加模糊，可以创建具有厚度感的 3D 立体文字效果：
代码示例
.ts-3d {
font-size: 28px;
color: white;
text-shadow: 1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa,
4px 4px 0 #999,
5px 5px 5px rgba(0,0,0,0.3);
}4. 复古与浮雕效果
复古效果使用硬偏移阴影（无模糊）创建错位感，浮雕效果则通过明暗双阴影模拟凹凸质感：
代码示例
/* 复古效果 */
.ts-retro {
font-size: 28px;
color: #f39c12;
text-shadow: 3px 3px 0 #e74c3c;
}
/* 浮雕效果 */
.ts-emboss {
font-size: 28px;
color: #16213e;
text-shadow: -1px -1px 0 rgba(255,255,255,0.2),
1px 1px 0 rgba(0,0,0,0.3);
}五、阴影实战组件
1. 悬浮卡片
卡片组件默认使用柔和阴影，悬停时阴影加深并轻微上浮，是最常见的交互反馈方式：
代码示例
.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
transform: translateY(-4px);
}2. 凸起按钮
按钮使用与背景色协调的彩色阴影，悬停时阴影加深，点击时阴影收缩模拟按压效果：
代码示例
.btn-raised {
background: #3498db;
color: white;
box-shadow: 0 4px 6px rgba(52,152,219,0.3);
}
.btn-raised:hover {
box-shadow: 0 6px 12px rgba(52,152,219,0.4);
transform: translateY(-1px);
}
.btn-raised:active {
box-shadow: 0 2px 4px rgba(52,152,219,0.3);
transform: translateY(0);
}3. 输入框内阴影
输入框使用 inset 阴影创建凹陷感，聚焦时叠加外发光：
代码示例
.input-inset {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.input-inset:focus {
border-color: #3498db;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06),
0 0 0 3px rgba(52,152,219,0.15);
}4. Material Design 纸质卡片
Material Design 经典方案使用双层阴影：第一层较轻的阴影提供整体深度，第二层较重的短阴影提供边缘锐度：
代码示例
.paper {
background: white;
padding: 30px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}六、浏览器兼容性
七、注意事项与最佳实践
注意事项
-
性能影响：大面积模糊阴影影响渲染性能，移动端尤其明显
-
阴影颜色：使用
rgba()设置半透明阴影颜色，避免纯黑阴影 -
不影响布局：box-shadow 不占据空间，不影响元素尺寸
-
可读性：确保 text-shadow 不影响文字的可读性
-
多层顺序：先写的阴影在上层
最佳实践
-
柔和阴影：使用
rgba(0,0,0,0.1)而非纯黑，更自然 -
Material Design：双层阴影（轻+重）模拟真实光照
-
悬停效果：悬停加深阴影+轻微上浮，最自然的交互反馈
-
内阴影：输入框使用
inset阴影创建凹陷感 -
描边替代：
box-shadow: 0 0 0 Npx color可替代 border 且不影响布局
小贴士
阴影颜色建议取自元素主色调的深色版本，而非纯黑。例如蓝色按钮使用 rgba(52,152,219,0.3) 作为阴影色，会比 rgba(0,0,0,0.3) 更加和谐自然，视觉上更有"色彩温度"。
八、代码规范示例
不推荐的写法
代码示例
/* 不推荐：纯黑阴影 */
.box { box-shadow: 0 4px 8px black; }
/* 不推荐：过大的模糊值 */
.box { box-shadow: 0 0 100px rgba(0,0,0,0.5); }
/* 不推荐：文字阴影影响可读性 */
p { text-shadow: 5px 5px 5px black; color: #333; }推荐的写法
代码示例
/* 推荐：半透明柔和阴影 */
.box { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
/* 推荐：Material Design 双层阴影 */
.card { box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24); }
/* 推荐：悬停加深 */
.card { transition: box-shadow 0.3s, transform 0.3s; }
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.15);
transform: translateY(-2px); }九、常见问题与解决方案
常见问题
阴影被 overflow:hidden 裁剪怎么办？
父容器设置了 overflow: hidden 时，子元素的阴影会被裁剪。解决方案：移除父容器的 overflow: hidden，或给子元素添加足够的 margin，让阴影在父容器边界内显示。
box-shadow 性能差如何解决？
大面积模糊阴影在移动端可能导致卡顿。解决方法：减小模糊半径（blur 值），使用 will-change: box-shadow 提示浏览器优化，或改用 border 替代描边效果。
text-shadow 在白色背景上不可见？
浅色阴影在白色背景上对比度不足。解决方法：使用较深的阴影颜色（如 rgba(0,0,0,0.3)）或增加模糊半径，让阴影在浅色背景上形成足够的对比。
如何创建均匀的描边效果？
使用 box-shadow: 0 0 0 Npx color，其中 N 为描边宽度。这种方式不会影响元素布局（与 border 不同），适合在悬停时添加描边而不引起布局抖动。
多层阴影如何控制层次？
多层阴影用逗号分隔，先写的阴影在上层（靠近用户）。建议将较清晰、较深的阴影写在前面，较模糊、较浅的阴影写在后面，这样能形成自然的光照层次感。
十、总结
CSS 阴影通过 box-shadow 和 text-shadow 为界面添加深度和层次感。box-shadow 支持外阴影、内阴影、多重阴影和描边效果；text-shadow 可以创建发光、霓虹、3D 等创意文字效果。在实际开发中，应使用半透明柔和阴影、Material Design 双层阴影方案、悬停阴影变化等最佳实践。核心原则是：柔和自然、分层叠加、性能优先。
本文涉及AI创作
内容由AI创作，请仔细甄别
