如何使用 box-shadow 实现一个 div 的上边内阴影和其余三边外阴影？

box-shadow实现一边内阴影、其余外阴影

如何使用 box-shadow 属性同时实现一个 div 的上边内阴影和其余三边外阴影？

解决方案：

box-shadow: 14px 0px 0 0 red, /* 上边内阴影 */     0px -14px 0 0 blue, /* 左边外阴影 */     -11px 0px 0 0 yellow, /* 右边外阴影 */     inset -20px -13px 9px 16px pink; /* 下边内阴影 */

原理：

box-shadow 属性接受多个值，每个值代表一个阴影。阴影的顺序从左到右确定了阴影的叠加方式。在本例中，我们分别设置了上面（内阴影）、左面（外阴影）、右面（外阴影）、下面（内阴影）的阴影。通过使用 inset 关键字，可以实现内阴影效果。

补充：

box-shadow 属性的每个参数分别为：

• x 轴偏移量（正：右移、负：左移）
• y 轴偏移量（正：下移、负：上移）
• 模糊半径（阴影的模糊度）
• 扩散半径（阴影的扩散范围）
• 颜色