阴影效果

CSS3的阴影效果为网页元素增添了立体感和层次感，通过box-shadow和text-shadow属性，可以轻松实现从简单投影到复杂光效的视觉效果。下面从基础语法到高级应用展开说明。

box-shadow基础语法

box-shadow属性用于为元素添加阴影效果，语法结构如下：

box-shadow: h-offset v-offset blur spread color inset;

参数说明：

• h-offset：水平偏移量（必需）
• v-offset：垂直偏移量（必需）
• blur：模糊半径（可选）
• spread：阴影扩展尺寸（可选）
• color：阴影颜色（可选）
• inset：内阴影（可选）

基本投影示例

.card {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

这会生成向右下方偏移5px、模糊范围10px的灰色阴影。

多重阴影效果

通过逗号分隔可以叠加多个阴影：

.button {
  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.1);
}

这种分层阴影技术常用来创建"浮动"效果。

内阴影应用

使用inset关键字实现内阴影：

.pressed {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

适合按钮按下状态或凹陷效果。

高级阴影技巧

霓虹灯效果

.neon {
  box-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0073e6,
    0 0 20px #0073e6;
}

不规则阴影

配合伪元素实现：

.tooltip::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  transform: rotate(45deg);
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}

text-shadow文字阴影

语法更简洁：

h1 {
  text-shadow: 2px 2px 4px #000000;
}

文字特效案例

.3d-text {
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa;
}

性能优化建议

1. 避免在动画中频繁改变阴影参数
2. 模糊半径(blur)值越大性能消耗越高
3. 使用will-change: box-shadow优化渲染

浏览器兼容方案

对于老旧浏览器：

.shadow {
  -webkit-box-shadow: 3px 3px 5px #666;
  -moz-box-shadow: 3px 3px 5px #666;
  box-shadow: 3px 3px 5px #666;
}

实际应用场景

卡片设计

.product-card {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.3s;
}

.product-card:hover {
  box-shadow: 
    0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
}

输入框聚焦状态

input:focus {
  box-shadow: 0 0 0 2px #4a90e2;
}

阴影与滤镜结合

配合filter: drop-shadow()实现更复杂效果：

.icon {
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.7));
}

动态阴影控制

通过CSS变量实现动态调整：

:root {
  --shadow-color: 0,0,0;
}

.element {
  box-shadow: 0 4px 8px rgba(var(--shadow-color), 0.3);
}