css制作阴影效果

CSS 阴影效果制作方法

box-shadow 基础用法
box-shadow 是制作阴影的核心属性，语法为：

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

示例：

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

内阴影效果
添加 inset 关键字实现元素内部阴影：

div {
  box-shadow: inset 0 0 15px #000000;
}

多重阴影
通过逗号分隔实现多层阴影：

div {
  box-shadow: 
    3px 3px 5px #FF0000,
    -3px -3px 5px #0000FF;
}

text-shadow 文字阴影
为文字添加阴影效果：

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

filter: drop-shadow()
适用于不规则形状（如 PNG 图像）：

img {
  filter: drop-shadow(8px 8px 10px gray);
}

阴影动画效果
结合 transition 实现交互动态阴影：

button {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}
button:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

注意事项

• 模糊半径越大，阴影边缘越柔和
• 扩展半径可为负值，缩小阴影尺寸
• 使用 RGBA 颜色可控制阴影透明度
• 过多阴影可能影响页面性能