css阴影制作

CSS 阴影制作方法

CSS 阴影效果可以通过 box-shadow 和 text-shadow 属性实现，分别用于元素边框和文本阴影。以下是具体实现方式：

元素阴影（box-shadow）

语法格式：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色] [inset];

示例代码：

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

参数说明：

• 水平偏移：正值为右，负值为左
• 垂直偏移：正值为下，负值为上
• 模糊半径：值越大边缘越模糊
• 扩散半径：控制阴影大小（可选）
• 颜色：支持所有CSS颜色格式
• inset：添加后变为内阴影（可选）

多层阴影示例：

.multi-shadow {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1);
}

文本阴影（text-shadow）

语法格式：

text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];

示例代码：

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

多层文本阴影：

.fancy-text {
  text-shadow: 
    1px 1px 1px #000,
    3px 3px 5px blue;
}

特殊效果实现

模糊阴影效果：

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

内阴影效果：

.inset-shadow {
  box-shadow: inset 0 0 10px #000;
}

霓虹灯效果：

.neon-effect {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de;
}

注意事项

• 阴影性能影响较小，但过多层级可能影响渲染
• 移动端使用时注意适度，避免过度消耗资源
• 使用RGBA颜色可以更好地控制透明度
• 可以通过CSS变量实现动态阴影效果

这些方法可以组合使用，创建各种视觉效果，从简单的投影到复杂的发光效果都能实现。实际应用中应根据设计需求调整参数值。