Question

我有一个用css属性设计的div：

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

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

我已经尝试使用background: rgba(0,0,0,0);将背景设置为100％不透明度，但没有任何变化。

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

该怎么办？

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