div 3 侧的 Box-Shadow（不在右侧）[重复]答案

【问题标题】：Box-Shadow on 3 sides of a div (not on the right side) [duplicate]div 3 侧的 Box-Shadow（不在右侧）[重复]
【发布时间】：2017-01-24 14:07:06
【问题描述】：

我已经看到了这个post，在多次尝试通过最佳答案修改代码后，我仍然无法将它从 box-shadow 左/下/右转换为上/左/下。

这是小提琴：

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 0 gray, 
        -10px 8px 0 gray, 10px 8px 0 gray;
}

<br/><br/>
<div id="shadowBox">Test</div>

我该怎么做？我不明白这是如何工作的，并且手册不会比经典的边框框更进一步......

【问题讨论】：

你尝试了什么......不要只参考链接，还请提供你到目前为止尝试了什么？
#shadowBox { 背景颜色：#ddd;边距：0px 自动；填充：10px；宽度：220px；盒子阴影：-10px 10px 0 灰色，-10px -10px 0 灰色，-10px 0px 0 灰色； }

标签： css

【解决方案1】：

你的意思是这样的？我可以向您推荐一个页面：cssmatic.com

-webkit-box-shadow: -20px 4px 30px 0px rgba(0,0,0,0.61);
-moz-box-shadow: -20px 4px 30px 0px rgba(0,0,0,0.61);
box-shadow: -20px 4px 30px 0px rgba(0,0,0,0.61);

【讨论】：

【解决方案2】：

HTML

<br/><br/>
<div id="shadowBox">Test</div>

CSS：上/左/下

  #shadowBox {
      background-color: #ddd;
      margin: 0px auto;
      padding: 10px;
      width: 220px;
      box-shadow: -10px -10px 10px gray, 
          -10px 0px 10px gray, -10px 10px 10px gray;
  }

【讨论】：