如何仅在元素的水平侧创建盒子阴影？

仅在水平面上创建盒子阴影

要实现仅跨越元素左侧和右侧（水平）侧面的盒子阴影，请考虑利用多个盒子阴影定义。

初始盒子阴影属性，

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

在元素的所有侧面产生阴影。要仅定位左侧和右侧，请添加两个单独的框阴影：

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

这将创建一个向右延伸 12 像素、向左延伸 -12 像素的阴影，从而达到所需的效果。

您还可能会遇到顶部和底部阴影轻微渗色的情况。为了缓解这种情况，请添加两个额外的框阴影来掩盖渗透：

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

此更新的定义将掩盖渗透并将阴影限制在元素的左侧和右侧，而无需使用黑客或图像。

以上是如何仅在元素的水平侧创建盒子阴影？的详细内容。更多信息请关注PHP中文网其他相关文章！