css阴影制作

CSS 阴影制作方法

box-shadow 基础用法
通过 box-shadow 属性为元素添加阴影，语法如下：

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

示例：

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

• 水平偏移（5px）：阴影向右移动距离（负值向左）。
• 垂直偏移（5px）：阴影向下移动距离（负值向上）。
• 模糊半径（10px）：阴影边缘模糊程度，值越大越模糊。
• 扩展半径（0）：阴影扩大或缩小（正值扩大，负值缩小）。
• 颜色（rgba）：支持透明度，如 rgba(0, 0, 0, 0.3)。
• inset：可选关键字，将阴影改为内阴影。

多重阴影效果
通过逗号分隔多个阴影值，实现叠加效果：

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

内阴影（inset）
使用 inset 关键字让阴影出现在元素内部：

div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

文字阴影（text-shadow）
为文字添加阴影，语法类似 box-shadow，但不支持 inset 和扩展半径：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

高级技巧：拟物化阴影
通过多层阴影模拟真实光照效果：

button {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

注意事项

• 阴影性能：过多或过大的阴影可能影响页面渲染性能。
• 浏览器兼容性：现代浏览器均支持 box-shadow 和 text-shadow，无需前缀。
• 响应式设计：阴影尺寸建议使用相对单位（如 rem）以适应不同屏幕。