格子的陰影（不在右側）

我已經看到這個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

格子的陰影（不在右側）

回答

相關問題