如何在CSS中创建一个只有左右的盒子阴影？

如何仅在左侧和右侧应用方框阴影

仅在左侧和右侧实现方框阴影效果在不使用 hacks 或图像的情况下，您可以利用多个盒子阴影来模拟所需的结果。操作方法如下：

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

此代码创建两个框阴影：一个用于左侧（-12px 偏移），一个用于右侧（12px 偏移）。左阴影的负偏移量和 -4px 的使用将阴影向内推，确保它只出现在左右边缘。

注意：由于提供的解决方案涉及“遮罩” “为了隐藏其他方面的阴影，请考虑探索替代方法，例如@Hamish在参考答案中建议的方法，它提供了一种更强大的解决方案，而无需遮罩。

为了进一步增强效果，您可以添加额外的框阴影来遮盖任何可能仍然渗透到顶部和底部的阴影：

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

此代码有效地遮罩去除顶部和底部的阴影，提供更加精致和理想的效果。

以上是如何在CSS中创建一个只有左右的盒子阴影？的详细内容。更多信息请关注PHP中文网其他相关文章！