如何用CSS的box-shadow实现div元素的单边内阴影和三边外阴影？

在CSS中，box-shadow可以通过逗号分隔同时定义多个阴影层，其中使用inset关键字表示内阴影，不加则为外阴影。要实现div的单边内阴影加三边外阴影，只需要把对应的四条边拆成不同阴影参数来写。

box-shadow基础语法

box-shadow的完整语法如下：

/* 外阴影 */
box-shadow: offset-x offset-y blur spread color;
/* 内阴影 */
box-shadow: inset offset-x offset-y blur spread color;
/* 多组阴影 */
box-shadow: 阴影1, 阴影2, ...;

其中offset-x和offset-y控制偏移，blur是模糊半径，spread是扩展半径。正值向右下偏移，负值向左上偏移。

单边内阴影的实现思路

如果只要上边内阴影，可以让y轴负偏移且spread适当，其他方向被自身覆盖。更简单做法是：用inset配合零偏移加负spread模拟单边。

上边内阴影示例

.div-single-inner {
  /* 上边内阴影：向上偏移0，spread为负只留上边 */
  box-shadow: inset 0 10px 10px -10px #000;
}

三边外阴影的实现思路

三边外阴影可分别写出左、右、下三条外阴影，或者利用大blur和spread近似。常用方式是分开声明三条。

左、右、下三边外阴影

.div-three-outer {
  box-shadow:
    -10px 0 10px -10px #888,  /* 左边 */
    10px 0 10px -10px #888,   /* 右边 */
    0 10px 10px -10px #888;   /* 下边 */
}

组合成单边内阴影与三边外阴影

将上面两类写在一起即可，注意用逗号分隔，且内阴影在前或在后均可。

.target-div {
  width: 200px;
  height: 120px;
  background: #fff;
  /* 上边内阴影 + 左、右、下三边外阴影 */
  box-shadow:
    inset 0 8px 6px -6px rgba(0,0,0,0.4),
    -8px 0 6px -6px rgba(0,0,0,0.2),
    8px 0 6px -6px rgba(0,0,0,0.2),
    0 8px 6px -6px rgba(0,0,0,0.2);
}

参数调节建议

• 内阴影的spread用负值可避免影响到其他边
• 外阴影的blur和spread相近能形成细线感
• 使用rgba颜色更易融入背景

小结

通过在一个box-shadow声明里混合inset与普通阴影，并合理设置偏移与spread，就能用纯CSS让div呈现单边内阴影和三边外阴影，无需额外标签。

CSSbox-shadowdiv内阴影修改时间：2026-07-30 20:18:18