框阴影在HTML、CSS中无法正常工作

我用HTML、CSS和JavaScript制作了一个计算器。在calculator（div）元素中，我试图添加一个长方体阴影，但它没有正确显示。只有部分阴影出现。

*{
保证金：无；
字体大小：100%；
字体系列：信使新；
} 
*：焦点{
大纲：无；
}
#计算器{
盒影：0 1px 3px 4px rgba（0,0,0,0.2）；
}
#输出{
身高：30%；
宽度：100%；
字体大小：150%；
文本对齐：右对齐；
颜色：黑色；
背景色：白色；
边界：无；
} 
按钮{
背景色：黑色；
颜色：白色；
宽度：25%；
高度：50px；
浮动：左；
边界：无；
}

( 
) 
摩登派青年
C


7.
8.
9
/ 


4.
5.
6.
* 


1.
2.
3.
- 


0
. 
= 
+ 

您有float:left；在按钮样式上，这就是导致容器高度无法调整的原因。我把它换成了一个显示器：flex和flex-wrap，并增加了框阴影的不透明度，以便于演示

*{
保证金：无；
字体大小：100%；
字体系列：信使新；
} 
*：焦点{
大纲：无；
}
#计算器{
盒影：0 1px 3px 4px rgba（0,0,0,0.8）；
}
#内容{
显示器：flex；
柔性包装：包装；
}
#输出{
身高：30%；
宽度：100%；
字体大小：150%；
文本对齐：右对齐；
颜色：黑色；
背景色：白色；
边界：无；
} 
按钮{
背景色：黑色；
颜色：白色；
宽度：25%；
高度：50px；
边界：无；
}

( 
) 
摩登派青年
C


7.
8.
9
/ 


4.
5.
6.
* 


1.
2.
3.
- 


0
. 
= 
+