前端Wiki/CSS3/基础/边框与背景增强

box-shadow 阴影

box-shadow 给盒子加阴影，完整语法是四个长度 + 颜色：box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色;，可选再加 inset 关键字变内阴影：

水平/垂直偏移：阴影相对盒子的位移，可为负。
模糊半径：越大越柔和，0 则是实心硬边。
扩散半径：阴影整体放大/缩小的量，负值会让阴影收缩到看不见。
inset：转为内阴影，常用于输入框凹陷感。

两个高频技巧：

无边框投影：偏移设 0、只留模糊，如 0 4px 12px rgba(0,0,0,.15)，得到四面均匀的悬浮感，是卡片设计的标配。
多层阴影：逗号分隔叠加多层，模拟更真实的光照层次。

性能提示：大范围模糊阴影开销不小，在频繁动效的元素上慎用；动画时优先过渡 transform 和 opacity，阴影变化交给过渡一小段 blur 即可。

本节要点语法「水平垂直模糊扩散颜色」，inset 转内阴影；卡片投影公式 0 4px 12px rgba(0,0,0,.15)；阴影可多层叠加，动效中慎用大模糊。

CSS

<style>
  .card {
    width: 220px; padding: 16px;
    background: #fff;
    border-radius: 8px;
    /* 悬浮卡片：无偏移 + 柔和模糊 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  }
  .card:hover {
    /* 悬停时阴影抬升，配合过渡更立体 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  }
  .inner {
    margin-top: 12px; padding: 8px;
    border-radius: 6px;
    background: #e0f7fa;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2); /* 内阴影 */
  }
</style>
<div class="card">
  悬浮卡片
  <div class="inner">凹陷的内嵌区域</div>
</div>

🔗 相关词条transform 元素层叠阴影过渡

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读