How Can I Create a Box-Shadow Only on the Horizontal Sides of an Element?

Creating Box-Shadows Solely on Horizontal Sides

To achieve a box-shadow that spans only the left and right (horizontal) sides of an element, consider leveraging multiple box-shadow definitions.

The initial box-shadow property,

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

produces a shadow on all sides of the element. To target just the left and right sides, add two separate box-shadows:

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

This will create a shadow that extends 12 pixels to the right and -12 pixels to the left, achieving the desired effect.

You may also encounter a slight bleed-through of the shadow on the top and bottom sides. To mitigate this, add two additional box-shadows to mask out the bleed-through:

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

This updated definition will mask the bleeding and confine the shadow to the left and right sides of the element without the use of hacks or images.

The above is the detailed content of How Can I Create a Box-Shadow Only on the Horizontal Sides of an Element?. For more information, please follow other related articles on the PHP Chinese website!