box-shadow - 盒模型阴影、text-shadow - 文本阴影、filter: drop-shadow()

CSS 阴影样式及应用

[TOC]

在CSS中，与阴影相关的样式主要有 `box-shadow`、`text-shadow` 和 `filter: drop-shadow()`。下面从作用、属性到应用场景，为你详细讲解这三种阴影样式的知识：

### 1. `box-shadow` - 盒模型阴影
#### 1.1. 作用
为元素的盒模型（内容区 + 内边距 + 边框）添加阴影效果，阴影会跟随元素的矩形轮廓。

#### 1.2. 基本语法
```css
box-shadow: h-offset v-offset blur spread color inset;
```

#### 1.3. 属性详解
| 属性       | 描述                                                                 |
|------------|----------------------------------------------------------------------|
| `h-offset` | **必需**，水平偏移量（正值向右，负值向左），如 `5px`。              |
| `v-offset` | **必需**，垂直偏移量（正值向下，负值向上），如 `-3px`。            |
| `blur`     | 可选，模糊半径（值越大，阴影越模糊），默认 `0`（锐利边缘）。        |
| `spread`   | 可选，扩展半径（正值使阴影扩大，负值使阴影缩小），默认 `0`。        |
| `color`    | 可选，阴影颜色，默认继承元素文本颜色。                               |
| `inset`    | 可选，关键字 `inset` 使阴影变为内阴影（从边缘向内部投射）。          |

#### 1.4. 示例
```css
/* 基本阴影：右下偏移、模糊 */
.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

/* 内阴影：边缘向内投射 */
.button {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* 多重阴影：用逗号分隔 */
.card {
  box-shadow:
    0 10px 15px -3px rgba(0,0,0,0.1),  /* 主阴影 */
    0 4px 6px -2px rgba(0,0,0,0.05),   /* 辅助阴影 */
    inset 0 2px 0 rgba(255,255,255,0.1);  /* 顶部高光 */
}
```

### 2. `text-shadow` - 文本阴影
#### 2.1. 作用
为文本内容添加阴影效果，常用于标题强调或视觉层次感。

#### 2.2. 基本语法
```css
text-shadow: h-offset v-offset blur color;
```

#### 2.3. 属性详解
| 属性       | 描述                                                                 |
|------------|----------------------------------------------------------------------|
| `h-offset` | **必需**，水平偏移量（正值向右，负值向左）。                        |
| `v-offset` | **必需**，垂直偏移量（正值向下，负值向上）。                        |
| `blur`     | 可选，模糊半径（值越大，阴影越模糊），默认 `0`。                    |
| `color`    | 可选，阴影颜色，默认继承文本颜色。                                   |

#### 2.4. 示例
```css
/* 基础文本阴影：右下偏移、模糊 */
.title {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 霓虹灯效果：多重阴影叠加 */
.neon {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0073e6,
    0 0 20px #0073e6;
}

/* 浮雕效果：同时添加正负偏移的阴影 */
.emboss {
  text-shadow:
    1px 1px 1px rgba(255,255,255,0.8),  /* 高光 */
    -1px -1px 1px rgba(0,0,0,0.4);       /* 暗部 */
}
```

### 3. `filter: drop-shadow()` - 内容轮廓阴影
#### 3.1. 作用
为元素内容的实际像素（如图片的非透明区域）添加阴影，完全忽略透明部分，适合不规则形状。

#### 3.2. 基本语法
```css
filter: drop-shadow(h-offset v-offset blur color);
```

#### 3.3. 属性详解
| 属性       | 描述                                                                 |
|------------|----------------------------------------------------------------------|
| `h-offset` | **必需**，水平偏移量（正值向右，负值向左）。                        |
| `v-offset` | **必需**，垂直偏移量（正值向下，负值向上）。                        |
| `blur`     | 可选，模糊半径（值越大，阴影越模糊），默认 `0`。                    |
| `color`    | 可选，阴影颜色，默认继承文本颜色。                                   |

#### 3.4. 示例
```css
/* 为透明图标添加贴合轮廓的阴影 */
.icon {
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.4));
}

/* 为SVG路径添加阴影 */
.svg-path {
  filter: drop-shadow(0 0 5px rgba(255,0,0,0.6));
}
```

### 4. 三种阴影的核心区别
| 特性                | `box-shadow`                     | `text-shadow`                   | `filter: drop-shadow()`         |
|---------------------|----------------------------------|---------------------------------|----------------------------------|
| **作用对象**        | 元素的盒模型（矩形）             | 文本内容                        | 元素内容的实际像素（忽略透明区）|
| **是否支持透明区域**| 否（阴影始终为矩形）             | 否（文本本身可能透明）          | 是（仅对非透明像素生成阴影）    |
| **典型应用场景**    | 卡片、按钮、容器                 | 标题、文字装饰                  | 图标、SVG、透明PNG图片          |
| **多重阴影语法**    | 用逗号分隔多个 `box-shadow`      | 用逗号分隔多个 `text-shadow`    | 不支持多重阴影（仅最后一个生效）|

### 5. 性能与兼容性
1. **性能**：
   - `box-shadow` 和 `text-shadow` 可能触发层合成（Layer），影响性能，尤其是复杂动画。
   - `filter: drop-shadow()` 在现代浏览器中性能较好，但旧版浏览器（如IE）不支持。

2. **兼容性**：
   - `box-shadow` 和 `text-shadow` 支持IE9+。
   - `filter: drop-shadow()` 支持Chrome、Firefox、Safari，IE不支持。

### 6. 实用技巧

1. **模拟边框效果**：
```css
/* 比border更灵活的“边框”，不影响盒模型尺寸 */
.border-like {
  box-shadow: 0 0 0 2px #000;
}
```

2. **实现悬停动画**：
```css
.card {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
}
```

3. **文字描边效果**：
```css
.stroke-text {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
```

### 7. 示例、实用技巧

#### 7.1. 基础应用

**样式代码：**

```css
#app {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 300px;
}
.shadow1 {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);  /*盒子阴影*/
    transition: box-shadow 0.3s ease;
}
.shadow1:hover {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
.shadow2 {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));  /*像素阴影*/
    transition: box-shadow 0.3s ease;
}
.shadow2:hover {
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));
}
.shadownT {
    text-shadow: /*霓虹效果*/
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #0073e6,
        0 0 20px #0073e6;
}
.shadownT2 {
    text-shadow:  /*给文字描边*/
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}
```

**页面代码：**

```html
<div id="app">
    <img class="shadow1" src="../../Image/reward.png">
    <img class="shadow2" src="../../Image/reward.png">
    <span class="shadownT">你好中国</span>
    <span class="shadownT2">0.5yes，0.5no</span>
</div>
```

**效果展示：**
![](/UploadFlie/MarkdownImg/20250716/202507160550143028.png)
上图分别对应上面的两个img和两个span

#### 7.1. 立体文字效果

**样式代码：**

```CSS
.shadownT3{
    text-shadow:
        -1px 1px  #bbb,
        -2px 2px  #bbb,
        -3px 3px  #bbb,
        -4px 4px  #bbb,
        -5px 5px  #bbb,
        -10px 10px 10px #000;
        color: #fff;
        /* font-size: 24px; */
}
```

**页面代码：**

```html
<div id="app">
     <h1 class="shadownT3">中国人民万岁</h1>
</div>
```

**效果展示：**
![](/UploadFlie/MarkdownImg/20250717/202507170308358739.png)