如何避免布局样式影响内容？解决box-shadow被隐藏问题

方案一：调整现有布局，保留固定宽高同时显示阴影 #

• 给.content容器添加内边距（padding），数值等于阴影的扩散半径（spread radius）。比如你的阴影是box-shadow: 0 0 10px rgba(0,0,0,0.5)，就把.content的padding设为10px，这样阴影就有了足够的显示空间，不会被overflow:hidden截断。
• 若不想改动.content的内边距，可以在.container外面再套一层新容器，把overflow:hidden移到这个新外层容器上，同时给新容器设置对应阴影半径的padding。让.content作为内层容器，阴影就能在新容器的padding区域正常显示。

方案二：重新设计布局，无需指定特定宽高适配阴影 #

• 移除.page>div的overflow:hidden，改用Grid的minmax()函数控制行列尺寸。比如grid-template-columns: minmax(300px, 1fr)，既保证最小宽度，又能自适应空间；同时利用Grid的gap属性预留阴影空间，避免阴影被相邻元素遮挡。
• 用伪元素模拟阴影：给.content添加伪元素（:before或:after），设置和.container一样的尺寸、定位，再把阴影样式写在伪元素上。这样伪元素不受.content的overflow:hidden限制（如果必须保留该属性的话），阴影就能正常显示。
• 用clip-path替代overflow:hidden：如果用overflow:hidden是为了裁剪内容，可以换成clip-path: inset(-10px -10px -10px -10px)（数值对应阴影半径），既能保留裁剪效果，又能让阴影在预留的负 inset 区域显示出来。

内容的提问来源于stack exchange，提问作者pangxiaoli