div的三面（不在右侧）的盒子阴影

Question

我已经看到了这个post，并且在多次尝试通过顶部答案修改代码后，我仍然无法将其从框阴影左/下/右转换为上/左/下。

这是小提琴：

#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>

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

Answer 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);

Answer 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;
  }