我如何让这个盒子样式直接显示在 div 块上方而不是向右显示？答案

【问题标题】：How would I make this box style show straight above the div block rather than off to the right?我如何让这个盒子样式直接显示在 div 块上方而不是向右显示？
【发布时间】：2021-08-29 00:06:13
【问题描述】：

box-shadow-image

这是我找到该样式的代码和网站。谢谢。

https://getcssscan.com/css-box-shadow-examples

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

【问题讨论】：

标签： css

【解决方案1】：

更改 X 和 Y 值。（颜色后的前 2 个值）

div {
  margin-top: 50px;
  margin-left: 50px;
  height: 200px;
  width: 200px;
  box-shadow: blue 0px 0px 0px 3px 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: white;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

哟！谢谢回答。我一直在更改 x 和 y 值，但似乎无法让它垂直到顶部。它们要么向左堆叠，要么向右堆叠。关于如何让它只堆叠在顶部的任何想法？欣赏它。
@callumnoble 编辑了我的 sn-p。再次运行它。这是你的意思吗？
太完美了！谢谢你的时间，我很感激。
@callumnoble np，保重

【解决方案2】：

阴影的中心原点和spread-radius：

.box {
  margin: 50px;
  width: 50px;
  height: 50px;
  box-shadow: blue 0px 0px 0px 2px inset, rgb(255 255 255) 0 0 0px 4px, rgb(31 193 27) 0 0px 0 6px, rgb(255 255 255) 0 0 0px 8px, rgb(255 217 19) 0 0 0px 10px, rgb(255 255 255) 0 0 0px 12px, rgb(255 156 85) 0 0 0 14px, rgb(255 255 255) 0 0 0px 16px, rgb(255 85 85) 0 0 0 18px;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

哟！感谢您的回复。这段代码覆盖了整个 div，你知道在我的第一个例子中让它与顶部对齐而不是向右倾斜吗？感谢您的宝贵时间，谢谢。