如何调整CSS box-shadow样式使其显示在div块正上方而非右侧

调整后可用的完整样式代码 #

box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 0px -10px 0px -3px, rgb(31, 193, 27) 0px -10px, rgb(255, 255, 255) 0px -20px 0px -3px, rgb(255, 217, 19) 0px -20px, rgb(255, 255, 255) 0px -30px 0px -3px, rgb(255, 156, 85) 0px -30px, rgb(255, 255, 255) 0px -40px 0px -3px, rgb(255, 85, 85) 0px -40px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 60px

修改逻辑说明 #

box-shadow的核心偏移参数规则为：第一个长度值是水平偏移量，正值向右偏移、负值向左偏移、设为0则无水平位移；第二个长度值是垂直偏移量，正值向下偏移、负值向上偏移。
你原本的代码里所有外层阴影的水平偏移都设为了10px/20px/30px/40px的正值，所以阴影整体会向右上方偏移。只要把这些水平偏移值统一改为0，就能保留原有的多层堆叠效果，同时让阴影完全显示在div的正上方。

内容的提问来源于stack exchange，提问作者callum noble