shadow 里最常用的两个阴影属性：
- text-shadow：文字阴影（简单）
- box-shadow：盒子/元素阴影（常用、功能强）
我用最通俗、能直接上手的方式给你讲清楚，附带复制即用的代码。
一、text-shadow 文字阴影
专门给文字加阴影，语法超级简单。
基础语法
text-shadow: 水平偏移 垂直偏移 模糊度 颜色;
参数解释
- 水平偏移：正数向右，负数向左
- 垂直偏移：正数向下，负数向上
- 模糊度：值越大越模糊（不能为负）
- 颜色：阴影颜色（可省略，默认文字颜色）
示例代码
/* 基础阴影 */
text-shadow: 2px 2px 4px #333;
/* 发光效果（最常用！） */
text-shadow: 0 0 8px #00aaff;
/* 多重阴影（用逗号分隔） */
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
二、box-shadow 盒子阴影（重点！）
给div、图片、按钮、卡片加阴影，90% 网页美化都用它。
完整语法
box-shadow: 水平偏移 垂直偏移 模糊度 扩散半径 颜色 内外阴影;
6 个参数（必须记）
- h-shadow：水平偏移（必需）
- v-shadow：垂直偏移（必需）
- blur：模糊半径（越大越柔）
- spread：扩散半径（扩大/缩小阴影）
- color：阴影颜色
- inset：内阴影（不加就是外阴影）
最常用写法（外阴影）
/* 卡片柔和阴影（推荐！） */
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
内阴影（inset）
/* 凹陷效果 */
box-shadow: inset 0 0 10px #000;
多重阴影
box-shadow:
0 0 10px red,
0 0 20px blue,
0 0 30px green;
三、最实用的 6 种阴影效果（直接复制）
1. 标准卡片阴影（最常用）
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
2. 悬浮抬起效果（hover）
div{
transition: 0.3s;
}
div:hover{
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
transform: translateY(-3px);
}
3. 发光效果
box-shadow: 0 0 12px #00aaff;
4. 内阴影（凹陷）
box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
5. 细边框阴影（代替 border）
box-shadow: 0 0 0 1px #ccc;
6. 文字发光
text-shadow: 0 0 6px #fff, 0 0 12px #00aaff;
四、快速区分 & 记忆
| 属性 | 作用 | 最常用格式 |
|---|---|---|
| text-shadow | 文字阴影 | 2px 2px 4px #333 |
| box-shadow | 盒子阴影 | 0 2px 12px rgba(0,0,0,0.1) |
- 偏移：正右下，负左上
- 模糊：越大越柔
- 扩散：越大越大
- 内阴影：加 inset
五、小技巧（高手必备）
- 阴影用 rgba 更自然：
rgba(0,0,0,0.1) - 垂直偏移 > 水平偏移更符合视觉习惯
- 配合
transition做 hover 动画超好看 - 多重阴影 = 高级质感
总结
- text-shadow：给文字加阴影，4个参数，简单
- box-shadow：给盒子加阴影，6个参数，支持内外、多层
- 最实用：
0 2px 12px rgba(0,0,0,0.1)卡片阴影 - 想凹陷就加 inset
需要我给你做一个可在线调试的阴影演示页面吗？直接复制就能用！
