格子的阴影（不在右侧）

我已经看到这个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>

我怎么能这样做？我不明白这是如何工作和手册不会比经典的边框...

来源

2016-09-16 eloism

你尝试过什么了....不要只参考链接，也请提供你到现在为止尝试过什么？ – Moumit

#shadowBox { background-color：#ddd; margin：0px auto; padding：10px; width：220px; box-shadow：-10px 10px 0 gray，-10px -10px 0 gray，-10px 0px 0 gray; } – JeetDaloneboy

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

来源

2016-09-16 11:14:51 Dsenese1

你的意思是这样的？我可以推荐你一个页面：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);

来源

2016-09-16 11:07:59 Ferror

格子的阴影（不在右侧）

回答

相关问题