如何垂直反转CSS按钮阴影以实现俯视视觉效果

要实现俯视视角的按钮效果，只需调整box-shadow属性的垂直偏移方向，把原设计中下坠的阴影调整为向上投射，同时反转内阴影的上下位置即可，核心修改逻辑如下：

• 所有外阴影的Y轴偏移值从正（向下）改为负（向上）
• 内阴影的上边缘高光调整为下边缘高光，下边缘暗部调整为上边缘

完整修改后的代码如下：

CSS代码 #

body {
  background: #555;
  padding: 100px 300px;
}

.level-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.level-buttons .pusher {
  margin: 2px;
  padding: 15px 80px 12px 80px;
  border-radius: 5px;
  background: -webkit-linear-gradient(top, #cc0000 0%, #990000 100%);
  color: rgba(255, 255, 255, 0.7);
  font-family: sans-serif;
  text-decoration: none;
  text-shadow: 0 -1px 0 maroon;
  border: 2px solid black;
  /* 阴影垂直方向反转 */
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.7), 0 -2px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.7), inset 0 -3px 1px #ff1a1a, inset 0 -9px 1px -5px rgba(255, 255, 255, 0.8);
}
.level-buttons .pusher:hover {
  background: -webkit-radial-gradient(50% 65%, ellipse closest-corner, #e60000 0%, #cc0000 80%, #b30000 100%);
  /* 悬浮状态阴影同步反转 */
  box-shadow: 0 0 50px rgba(255, 51, 51, 0.6), 0 -2px 6px rgba(0, 0, 0, 0.7), 0 -2px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.7), inset 0 -3px 1px #f50000, inset 0 -9px 1px -5px rgba(255, 255, 255, 0.6), inset 0 -6px 3px 1px #990000;
}
.level-buttons .pusher:active {
  background: -webkit-radial-gradient(center, ellipse cover, #e60000 0%, #cc0000 80%, #b30000 100%);
  /* 按压状态阴影同步反转 */
  box-shadow: 0 0 20px rgba(255, 51, 51, 0.4), 0 -1px 2px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

HTML代码 #

<div class="level-buttons">
  <a href="#" class="pusher"> Pusher </a>
  <a href="#" class="pusher"> Pusher </a>
  <a href="#" class="pusher"> Pusher </a>
</div>

修改完成后按钮阴影会向上投射，呈现出从上方俯视的凸起视觉效果，符合预期需求。

内容的提问来源于stack exchange，提问作者Sara Ree