如何实现特定inset box-shadow：侧边底部一致、顶部为1px边框且无阴影

算力阿峰

2026-5-20

嘿，这个需求其实很好实现，我给你两种方案，你可以根据自己的场景选择：

方案一：简洁版（推荐）

这种写法只用一个box-shadow就能搞定，同时用顶部边框替代阴影：

<div class="shadow-box">我是带有特殊内阴影的元素</div>

.shadow-box {
  /* 基础样式，根据你的需求调整 */
  width: 300px;
  height: 200px;
  padding: 2rem;
  background: #ffffff; /* 必须是不透明背景，阴影才会正常显示 */
  
  /* 核心样式 */
  border-top: 1px solid #e0e0e0; /* 顶部1px边框，替代原本要避免的顶部阴影 */
  box-shadow: inset 0 2px 8px 2px rgba(0, 0, 0, 0.15);
}

原理说明：

border-top直接在顶部生成1px边框，完美替代原本要去掉的顶部内阴影；
box-shadow的inset表示内阴影，0 2px是y轴向下偏移2px——这样顶部的阴影会被1px的边框完全挡住，不会显示；
后面的8px是模糊半径，2px是扩展半径，这两个参数控制阴影的扩散范围和模糊程度，你可以根据视觉需求灵活调整数值；
这个写法会同时生成左右两侧和底部的内阴影，完全符合你的要求。

方案二：精细化控制版

如果你需要单独调整左右和底部阴影的样式（比如不同的模糊度或颜色），可以分开定义三个内阴影：

.shadow-box {
  /* 基础样式同上 */
  width: 300px;
  height: 200px;
  padding: 2rem;
  background: #ffffff;
  
  border-top: 1px solid #e0e0e0;
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.15), /* 底部内阴影 */
    inset 2px 0 6px rgba(0, 0, 0, 0.12), /* 右侧内阴影 */
    inset -2px 0 6px rgba(0, 0, 0, 0.12); /* 左侧内阴影 */
}

这种写法可以给左右和底部的阴影设置不同的参数，比如让右侧阴影模糊度更低、颜色更浅，适合需要更精细化视觉效果的场景。