How to Create Horizontal Box Shadows Without Images or Tricks?

How to Achieve Horizontal Box Shadows

How to Achieve Horizontal Box Shadows only on the left and right (horizontal?) sides without resorting to any tricks or images Achieve box-shadow effect?

Using the following code will produce a surrounding shadow effect:

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

Solution: Use multiple box-shadow

You can use Multiple box-shadow solves this problem, each box-shadow Corresponding side:

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

Masking imperfect shadow (optional)

To further mask the bleeding effect, add two layers at the bottom and top box-shadow for masking:

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 Horizontal Box Shadows Without Images or Tricks?. For more information, please follow other related articles on the PHP Chinese website!