一、盒子阴影：立体化设计的核心武器
（一）box-shadow基础语法与参数解析
CSS3通过box-shadow属性实现元素阴影效果，其完整语法为：
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color;
核心参数详解：
inset关键字（可选）
控制阴影类型：默认outset外阴影，添加inset后变为内阴影
视觉差异：外阴影在元素边界外扩展，内阴影在元素边框内凹陷
x-offset & y-offset（必选）
数值单位：支持px、em、rem等长度单位，允许正负值
正值效果：x轴向右、y轴向下偏移；负值效果：x轴向左、y轴向上偏移
经典案例：模拟卡片悬浮效果box-shadow: 0 4px 12px rgba(0,0,0,0.15);
blur-radius（可选，默认0）
控制阴影模糊程度，数值越大阴影越模糊
注意：该值不能为负数，0表示硬边缘阴影
spread-radius（可选，默认0）
控制阴影扩散范围：正值扩大阴影，负值收缩阴影
典型应用：制作发光效果box-shadow: 0 0 8px 4px #ff5722;
color（可选，默认透明）
支持所有CSS颜色格式：hex、rgb、rgba、hsl等
最佳实践：使用rgba设置半透明阴影，实现层次感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.15);
}
/* 内阴影与外阴影混合 */
.input-box {
box-shadow:
inset 0 1px 2px rgba(0,0,0,0.1), /* 内阴影模拟凹陷 */
0 1px 2px rgba(255,255,255,0.9); /* 外阴影模拟高光 */
}
（三）响应式阴影设计技巧
媒体查询控制阴影强度
@media (min-width: 768px) {
.card {
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
}
@media (max-width: 767px) {
.card {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
}
动态交互效果