我的 div 元素内部没有阴影

Question

>ive得到了一个带有css属性的div：

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

我遇到的问题是，div 的阴影就在外面，但不在边界内。

Ive Allready试图用background: rgba(0,0,0,0);将背景设置为100%不透明度，但没有任何变化。

我也尝试使用插图，但阴影就在里面。

怎么办？

Answer 1

没有理由期待任何不同的东西。如果需要内部阴影，请在以关键字 inset 开头的声明中添加第二个阴影。

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

代码笔