box-shadow和text-shadow可提升页面视觉层次，前者用于元素投影，后者用于文字效果，通过合理设置偏移、模糊、颜色等参数实现立体感，建议控制透明度与模糊范围以保证自然与性能。
在CSS中，阴影效果可以显著提升页面的视觉层次和设计感。常用的阴影属性有两个：box-shadow 用于元素整体的盒阴影，text-shadow 用于文字阴影。下面通过实际示例讲解它们的用法和技巧。
box-shadow：为元素添加立体阴影
box-shadow 可以为块级或行内元素添加投影效果，常用于按钮、卡片、模态框等组件。
语法格式：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset（可选）;各参数说明：
立即学习“前端免费学习笔记（深入）”；
- 水平偏移：正值向右，负值向左
- 垂直偏移：正值向下，负值向上
- 模糊半径：值越大越模糊，不能为负
- 扩散半径：扩大或缩小阴影范围，可为负
- 颜色：支持rgba、十六进制等
- inset：将阴影变为内阴影
常见用法示例：
/* 外阴影，轻微模糊 */.box {
box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}
/ 内阴影，用于凹陷效果 /
.inset-box {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/ 多重阴影，叠加多个效果 /
.multi-shadow {
box-shadow: 0 4px 6px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.08);
}
text-shadow：为文字添加阴影
text-shadow 专用于文本，适合标题、Logo或强调文字，增强可读性或艺术感。
语法格式：
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;与 box-shadow 类似，但不支持扩展半径和 inset。
实用示例：
/* 简单文字阴影，提升可读性 */.title {
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/ 浮雕效果（浅色上移阴影） /
.relief-text {
color: #aaa;
text-shadow: 0 1px 0 #fff;
}
/ 发光文字效果 /
.glow {
text-shadow: 0 0 10px #ff0080;
}
/ 多重阴影，创造立体感 /
.deep-text {
text-shadow: 2px 2px 0 #ccc,
4px 4px 0 #999;
}
实践建议与注意事项
使用阴影时注意以下几点，避免影响性能或可访问性：
- 优先使用 rgba 颜色并控制透明度，让阴影更自然
- 避免过度模糊或过大偏移，会显得不真实
- 在深色背景上使用浅色阴影，在浅色背景上使用深色阴影以保证可见性
- 多重阴影按书写顺序渲染，前面的在上层
- 慎用大范围模糊，可能影响渲染性能
- 确保文字即使没有阴影也能清晰阅读（考虑关闭样式的情况）
基本上就这些。掌握 box-shadow 和 text-shadow 的参数组合，能让你的设计更有层次感和表现力。多尝试不同数值，找到最适合你页面风格的效果。
