css制作阴影

CSS 阴影基础语法

CSS 主要通过 box-shadow 和 text-shadow 属性实现阴影效果。box-shadow 用于元素框阴影，text-shadow 用于文本阴影。

box-shadow 语法：

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

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

text-shadow 语法：

text-shadow: h-offset v-offset blur color;

常见阴影效果实现

基础外阴影：

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

• 水平偏移 5px，垂直偏移 5px，模糊半径 10px，半透明黑色阴影。

内阴影效果：

.box {
  box-shadow: inset 0 0 15px #333;
}

• 使用 inset 关键字实现内阴影，无偏移，模糊半径 15px。

多重阴影：

.box {
  box-shadow: 
    3px 3px 5px #999,
    -1px -1px 2px #eee;
}

• 通过逗号分隔实现多层阴影叠加。

文本阴影：

.text {
  text-shadow: 2px 2px 4px #666;
}

• 文本阴影通常用于标题或强调文字。

高级阴影技巧

模糊扩散控制：

.box {
  box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.5);
}

• spread 参数（10px）控制阴影扩散范围。

霓虹灯效果：

.neon {
  box-shadow: 
    0 0 10px #fff,
    0 0 20px #0ff,
    0 0 30px #0ff;
}

• 多层不同模糊半径的亮色阴影叠加。

悬浮卡片效果：

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 
              0 6px 20px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2), 
              0 12px 40px rgba(0,0,0,0.2);
}

• 结合过渡动画实现交互效果。

浏览器兼容性注意事项

• 旧版 IE 浏览器（IE8 及以下）不支持阴影属性
• 使用 -webkit- 和 -moz- 前缀可增强兼容性：

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

性能优化建议

• 避免在大量元素上使用高模糊值的阴影
• 动画元素使用 transform 而非 box-shadow 动画
• 考虑使用 CSS 变量管理阴影参数：

  :root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  }
  .element {
  box-shadow: var(--shadow-sm);
  }

通过合理组合这些参数和技巧，可以创建从简单到复杂的各种阴影效果，增强界面层次感和视觉吸引力。