CSS box-shadow属性使用详解

CSS box-shadow 属性详解

box-shadow 用于在元素框上添加阴影效果，支持多个阴影叠加。以下是完整语法和用法：

📌 基础语法

css

复制

下载

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

🔍 使用示例

1. 基础外阴影

css

复制

下载

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

• 右下方阴影：水平5px + 垂直5px

• 模糊10px + 半透明白色背景的黑色（30%不透明度）

2. 内阴影（inset）

css

复制

下载

div {
  box-shadow: inset 0 0 20px #ff0000;
}

• 内部红色辉光效果

• 模糊半径20px（无偏移）

3. 多阴影叠加

css

复制

下载

div {
  box-shadow: 
    0 2px 5px rgba(0,0,0,0.1),   /* 底部淡淡阴影 */
    inset 0 -3px 10px blue;       /* 底部内发光 */
}

4. 特殊效果：发光边框

css

复制

下载

div {
  box-shadow: 0 0 0 3px #4ade80; /* 扩展半径=3px（无模糊） */
}

https://assets.codepen.io/32887/box-shadow-outline.png

⚠️ 注意事项

1. 阴影不影响布局
   阴影不占用空间，不会挤压其他元素位置（与 border 不同）

2. 性能优化
   避免大面积使用高模糊值（如 blur > 20px），尤其在动画中

3. 层叠顺序
   多个阴影时，先定义的阴影显示在上层

4. 响应式适配
   在小屏幕上减少阴影尺寸：

   css

   复制

   下载

   @media (max-width: 768px) {
     .box { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
   }

🌈 创意案例

css

复制

下载

/* 3D 悬浮按钮 */
button {
  box-shadow: 
    0 4px 0 #1d4ed8,           /* 底部深色层模拟厚度 */
    0 6px 10px rgba(0,0,0,0.2); /* 模糊阴影增强立体感 */
  transition: transform 0.1s, box-shadow 0.1s;
}

button:active {
  transform: translateY(4px);   /* 按下时下移 */
  box-shadow: 0 0 0 #1d4ed8;   /* 移除底部阴影 */
}

💡 提示：用 rgba() 设置颜色透明度，能实现更自然的阴影层次感！