学习

盒子阴影 (box-shadow)

2026-02-23/0/ 编辑

盒子阴影 (box-shadow)

一、box-shadow 概述

box-shadow 给盒子添加阴影效果,阴影是不占空间的。

基本语法

box-shadow: [inset] x偏移 Y偏移 [模糊半径] [扩散半径] 颜色;

参数说明

参数	说明
`inset`	表示内阴影,当需要设置内阴影时,才添加(可省略)
`x偏移`	阴影在 x 轴(水平)方向偏移量值为正,表示阴影向右偏移值为负,表示阴影向左偏移
`y偏移`	阴影在 Y 轴(垂直)方向偏移量值为正,表示阴影向下偏移值为负,表示阴影向上偏移
`模糊半径`	值只能是 >=0 的值,表示阴影的模糊半径(可省略)
`扩散半径`	取正值时,阴影扩大;取负值时,阴影收缩。默认为 0,此时阴影与元素同样大。(可省略)
`颜色`	表示阴影的颜色

注: [] 方括号表示这个值可以省略不写

二、简单阴影

默认情况下,元素的阴影与元素本身一样大小。

基本语法

box-shadow: x偏移 Y偏移 颜色;

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    /* 盒子阴影: x偏移量 y偏移量 阴影颜色 */
    box-shadow: 20px 20px #ddd;
  }
</style>
<body>
  <div class="box"></div>
</body>

三、带模糊的阴影

基本语法

box-shadow: x偏移 Y偏移 模糊量 颜色;

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    /*
      60px  x(水平)向右偏移量
      20px y(垂直)向下偏移量
      10px 阴影模糊量
      red  阴影颜色为红色
    */
    box-shadow: 60px 20px 10px red;
  }
</style>
<body>
  <div class="box"></div>
</body>

对比效果:

box-shadow: 0px 0px 10px red; - 阴影在元素四周
box-shadow: 60px 20px 10px red; - 阴影有偏移

四、阴影延展

基本语法

box-shadow: x偏移 Y偏移 模糊半径 [扩散半径] 颜色;

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    /*
      60px  x(水平)向右偏移量
      20px y(垂直)向下偏移量
      10px 阴影模糊量
      50px 阴影的延展大小(上下左右都延展50px)
      red  阴影颜色
    */
    box-shadow: 60px 20px 10px 50px red;
  }
</style>
<body>
  <div class="box"></div>
</body>

五、内阴影

概念

如果没有指定 inset,默认阴影在边框外,即阴影向外扩散
使用 inset 关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了
此时阴影会在边框之内(即使是透明边框)、背景之上、内容之下

基本语法

/* [] 表示可选项 */
box-shadow: [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色;

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    box-shadow: inset 0px 0px 10px 20px red;
  }
</style>
<body>
  <div class="box"></div>
</body>

六、多个阴影

规则

如果一个盒子有多个阴影,则每个阴影之间用 ,(逗号)隔开
当阴影个数 > 1 时,阴影应用的顺序为从前到后,第一个指定的阴影在最上面显示
内阴影不管写在哪个位置,都会在外阴影上面

基本语法

box-shadow: [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色,
            [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色,
            [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色;

案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 50px auto;
    /* 左上角和右下角圆半径为100px */
    border-radius: 100px 0px 100px 0px;
    border: 4px solid tomato;
    /* 红色阴影,红色里面的黄色阴影,最外面的黄色阴影 */
    box-shadow: 0px 0px 10px rgb(251, 9, 9),
                inset 0px 0px 20px yellow,
                0px 0px 10px 30px yellow;
  }
</style>
<body>
  <div class="box"></div>
</body>

七、去掉阴影

/*
  none 为 box-shadow 的默认值,不设置阴影效果
  当我们想去掉元素添加的阴影效果时,就可以设置 box-shadow: none;
*/
box-shadow: none;

八、实战案例 - 纸张效果

<style>
  .page {
    margin: 50px auto;
    width: 400px;
    height: 600px;
    padding: 20px;
    box-shadow: inset 0 -48px 48px rgba(0, 0, 0, 0.1),
                0 0 0 2px rgb(255, 255, 255),
                5px 5px 16px rgba(0, 0, 0, 0.3);
  }
</style>
<body>
  <div class="page"></div>
</body>

九、浏览器兼容前缀

目前所有现代浏览器都支持无前缀写法,所以前缀加不加其实不重要了。

.element {
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Chrome, Safari, 旧版 Android/iOS */
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);    /* Firefox 3.5及以下 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);         /* 标准语法 */
}

十、实战应用场景

场景1: 卡片阴影

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

/* 悬停效果 */
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

场景2: 按钮阴影

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

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

场景3: 输入框焦点阴影

.input:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
}

场景4: 浮层/弹窗阴影

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

场景5: 底部导航栏阴影

.navbar {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

场景6: 内阴影效果

/* 凹陷效果 */
.inset-shadow {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 按钮 pressed 状态 */
.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

场景7: 多重阴影创意效果

/* 霓虹效果 */
.neon {
  box-shadow: 0 0 5px #fff,
              0 0 10px #fff,
              0 0 20px #ff00de,
              0 0 40px #ff00de;
}

/* 纸张堆叠效果 */
.stack {
  box-shadow: 1px 1px 0 #ccc,
              2px 2px 0 #c9c9c9,
              3px 3px 0 #bbb,
              4px 4px 0 #b9b9b9,
              5px 5px 0 #aaa;
}

十一、性能优化建议

1. 避免过度使用阴影

/* ❌ 不推荐: 过多重叠阴影 */
.box {
  box-shadow: 0 0 0 1px #fff,
              0 0 0 2px #eee,
              0 0 0 3px #ddd,
              /* ...更多阴影 */
}

/* ✅ 推荐: 使用 border 代替 */
.box {
  border: 1px solid #eee;
}

2. 使用 rgba 而不是 hex

/* ✅ 推荐: 使用 rgba */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

/* ⚠️ 可以: 使用 hex */
box-shadow: 0 2px 8px #0000001a; /* 等同于 rgba(0,0,0,0.1) */

3. 避免大范围模糊

/* ❌ 不推荐: 过大模糊半径 */
.box {
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1); /* 性能消耗大 */
}

/* ✅ 推荐: 合理的模糊半径 */
.box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

4. 动画中使用 box-shadow 注意性能

/* ⚠️ 性能较差: 直接动画 box-shadow */
.box {
  transition: box-shadow 0.3s;
}
.box:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ✅ 性能更好: 使用 opacity 动画伪元素 */
.box {
  position: relative;
}
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.3s;
}
.box:hover::after {
  opacity: 1;
}

css学习