1. **box-shadow**
为元素添加外部阴影。
css
.box {
box-shadow: h-offset v-offset blur spread color inset;
}
- **参数解释**：
- `h-offset`（必需）：水平偏移量，正值向右，负值向左。
- `v-offset`（必需）：垂直偏移量，正值向下，负值向上。
- `blur`（可选）：模糊半径，值越大阴影越模糊。
- `spread`（可选）：扩展半径，正值使阴影扩大，负值使阴影缩小。
- `color`（可选）：阴影颜色，默认继承元素文本颜色。
- `inset`（可选）：将阴影改为内部阴影（从边缘向内投射）。
**示例**：
css
/* 基本阴影 */
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 悬停时的动态阴影 */
.button:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/* 内部阴影 */
.input:focus {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
/* 多重阴影 */
.avatar {
box-shadow: 0 0 0 4px white, 0 0 0 8px #3498db;
}
2. **text-shadow**
为文本添加阴影。
css
.text {
text-shadow: h-offset v-offset blur color;
}
- **参数解释**：
- `h-offset`（必需）：水平偏移量。
- `v-offset`（必需）：垂直偏移量。
- `blur`（可选）：模糊半径。
- `color`（可选）：阴影颜色。
**示例**：
css
/* 基本文本阴影 */
.title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 发光效果 */
.highlight {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de;
}
/* 多重阴影实现浮雕效果 */
.embossed {
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
}
3. **filter: drop-shadow()**
为元素（包括透明部分）添加投影，常用于 SVG 或带有透明区域的元素。
css
.element {
filter: drop-shadow(h-offset v-offset blur color);
}
**示例**：
css
/* 为图标添加阴影 */
.icon {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}
/* 为透明 PNG 添加阴影 */
.logo {
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
4. **CSS 渐变模拟阴影**
使用 `background-image` 和渐变创建自定义阴影效果。
css
/* 顶部渐变阴影 */
.header {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}
5. **阴影技巧与最佳实践**
- **多层阴影**：通过逗号分隔多个阴影值创建复杂效果。
```css
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
```
- **动态阴影**：结合 `transition` 和 `:hover` 创建交互效果。
```css
.button {
transition: box-shadow 0.3s ease;
}
.button:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
```
- **阴影颜色与透明度**：使用 RGBA 或 HSLA 控制透明度。
```css
.floating {
box-shadow: 0 15px 25px -12px rgba(0, 0, 0, 0.4);
}
```
6. **浏览器兼容性**
- `box-shadow` 和 `text-shadow`：支持现代浏览器及 IE9+。
- `filter: drop-shadow()`：支持现代浏览器及 IE13+（Edge）。
示例展示
以下是一个使用多种阴影效果的卡片组件：
css
.card {
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
.card-title {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.card-image {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
总结
- **box-shadow**：适用于元素外部阴影，支持内部阴影和多重阴影。
- **text-shadow**：专门用于文本，可创建立体感或装饰效果。
- **filter: drop-shadow()**：适用于透明元素，生成自然投影。
- **渐变阴影**：自定义形状的阴影效果。
合理运用阴影可以显著提升界面的视觉层次和用户体验，但应避免过度使用导致页面显得沉重或杂乱。