我的 div 元素内没有阴影答案

【问题标题】：there is no shadow inside my div element我的 div 元素内没有阴影
【发布时间】：2023-03-03 16:49:01
【问题描述】：

我得到了一个带有 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% 不透明度，但没有任何变化。

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

怎么办？

【问题讨论】：

【解决方案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);.

请注意，带有框阴影的元素的后代元素将覆盖内部阴影。

还要注意，一些旧版本的现代浏览器一次只支持一个影子声明，但我认为浏览器/版本的集合非常少。

【讨论】：

【解决方案2】：

试试这样的：

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

【讨论】：