沒有影子我的div元素裏面

Question

香港專業教育學院得到了與CSS屬性風格的一個div：

border: 20px solid #000; 
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5); 

我的問題是，股利的陰影只是外面，但內部沒有邊界的。

ive allready試圖設置背景爲100％不透明與background: rgba(0,0,0,0);但沒有任何變化。

我也嘗試過使用插圖，但隨後陰影就在裏面。

該怎麼辦？

Answer 1

沒有理由期待任何不同。如果您想要內部影子，請在以關鍵字inset開頭的聲明中添加第二個影子。

E.g. -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5), inset 0 0 40px 0 rgba(0,0,0,0.5);。

請注意，元素是帶有陰影的元素的後代將覆蓋內部陰影。

另請注意，一些舊版本的現代瀏覽器一次只支持一個影子聲明，但我認爲這套瀏覽器/版本非常小。

Answer 2

嘗試這樣：

#mydiv { 
border: 1px red solid; 
box-shadow: 0 0 15px #555, inset 0 0 15px #555; 
width: 100px; height: 100px; 
} 

Codepen