文字阴影
CSS text-shadow 属性为文本添加阴影。
text-shadow 是 CSS 属性，用于为文本添加阴影效果。它可以让你在文本的周围创建多个阴影，每个阴影可以有不同的颜色、偏移量、模糊半径等。
语法
text-shadow: h-shadow v-shadow blur-radius color;h-shadow：水平阴影的偏移量。正值表示阴影在文本的右侧，负值表示左侧。
v-shadow：垂直阴影的偏移量。正值表示阴影在文本的下方，负值表示上方。
blur-radius（可选）：阴影的模糊半径。值越大，阴影越模糊。默认值为
0，表示没有模糊。color（可选）：阴影的颜色。可以使用颜色名称、十六进制值、RGB、RGBA、HSL、HSLA 等。
使用例子
基本阴影效果
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
水平偏移：
2px垂直偏移：
2px模糊半径：
4px颜色：
rgba(0, 0, 0, 0.5)（半透明黑色）
多重阴影
text-shadow: 1px 1px 2px red, -1px -1px 2px blue;第一个阴影：红色，向右下方偏移
1px，模糊2px第二个阴影：蓝色，向左上方偏移
1px，模糊2px
无模糊的阴影
text-shadow: 3px 3px 0px #000;水平偏移：
3px垂直偏移：
3px模糊半径：
0px（无模糊）颜色：
#000（黑色）
彩色阴影
text-shadow: 0 0 5px #ff0000, 0 0 10px #00ff00, 0 0 15px #0000ff;第一个阴影：红色，无偏移，模糊
5px第二个阴影：绿色，无偏移，模糊
10px第三个阴影：蓝色，无偏移，模糊
15px
发光效果
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;三个白色阴影，依次增加模糊半径，形成发光效果。这里为了展示清楚，给其增加了红色背景色。
盒子阴影
box-shadow 是 CSS 属性，用于为元素（如 <div>、<button> 等）添加阴影效果。它可以为元素的边框外部或内部创建阴影，支持多个阴影叠加，并且可以控制阴影的颜色、偏移量、模糊半径和扩展范围。
语法
box-shadow: h-shadow v-shadow blur-radius spread-radius color inset;h-shadow：水平阴影的偏移量。正值表示阴影在元素的右侧，负值表示左侧。
v-shadow：垂直阴影的偏移量。正值表示阴影在元素的下方，负值表示上方。
blur-radius（可选）：阴影的模糊半径。值越大，阴影越模糊。默认值为
0，表示没有模糊。spread-radius（可选）：阴影的扩展范围。正值会扩大阴影，负值会缩小阴影。默认值为
0。color（可选）：阴影的颜色。可以使用颜色名称、十六进制值、RGB、RGBA、HSL、HSLA 等。
inset（可选）：如果指定了
inset，阴影会出现在元素内部，而不是外部。
使用例子
基本阴影效果
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);水平偏移：
4px垂直偏移：
4px模糊半径：
8px颜色：
rgba(0, 0, 0, 0.3)（半透明黑色）
扩展阴影
box-shadow: 0 0 10px 5px #ff0000;水平偏移：
0垂直偏移：
0模糊半径：
10px扩展范围：
5px颜色：
#ff0000（红色）
内部阴影
box-shadow: inset 0 0 10px red;使用
inset，阴影出现在元素内部。模糊半径：
10px颜色：
rgba(0, 0, 0, 0.5)（红色）
多重阴影
box-shadow: 2px 2px 5px #000, -2px -2px 5px red;第一个阴影：黑色，向右下方偏移
2px，模糊5px第二个阴影：红色，向左上方偏移
2px，模糊5px
发光效果
box-shadow: 0 0 20px 10px rgba(255, 255, 0, 0.8);水平偏移：
0垂直偏移：
0模糊半径：
20px扩展范围：
10px颜色：
rgba(255, 255, 0, 0.8)（半透明黄色）
卡片效果
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);第一个阴影：较小的阴影，用于卡片边缘。
第二个阴影：较大的阴影，用于卡片底部，增强立体感。