How to Create a Box Shadow Only on the Left and Right Sides of an Element?

Box Shadows Limited to Left and Right Sides Without Hacks

Question:

How can you create a box shadow exclusively on the left and right sides of an element without resorting to hacks or images?

Answer:

The solution employs multiple box-shadows, one for each designated side:

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

However, it's worth noting that this approach is not entirely perfect, as it may result in some shadow bleeding. To mitigate this, additional box-shadows can be added at the top and bottom to mask the overflow:

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

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