How to Create a Left and Right Only Box-Shadow in CSS?

How to Apply Box-Shadow to Only the Left and Right Sides

To achieve a box-shadow effect on only the left and right sides without using hacks or images, you can take advantage of multiple box-shadows to simulate the desired result. Here's how:

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

This code creates two box-shadows: one for the left side (-12px offset) and one for the right side (12px offset). The negative offset for the left shadow and the use of -4px pushes the shadow inward, ensuring it only appears on the left and right edges.

Note: As the provided solution involves "masking" to hide the shadow from other sides, consider exploring alternative approaches, such as the one suggested by @Hamish in the reference answer, which offers a more robust solution without masking.

To enhance the effect further, you can add additional box-shadows to mask out any shadow that may still bleed through on the top and bottom:

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 code effectively masks out the shadow on the top and bottom, providing a more polished and desired effect.

The above is the detailed content of How to Create a Left and Right Only Box-Shadow in CSS?. For more information, please follow other related articles on the PHP Chinese website!