How to get box-shadow on left & right sides only

问题:

Any way to get box-shadow on left & right (horizontal?) sides only with no hacks or images. I am using:

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

But it gives shadow all around.

I have no borders around the elements.

回答1:

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

---

You can get close with multiple box-shadows; one for each side

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

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds 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); 

http://jsfiddle.net/LE6Lz/

回答2:

I know this is a late addition but I wasn't satisfied with the rounded top and bottom to the shadow present in Deefour's solution so created my own.

See demo here.

Inset box-shadow; creates a nice uniform shadow with the top and bottom cut off:

box-shadow: -15px 0 15px -15px inset; 

To use this effect on the sides of your element, create two pseudo elements :before and :after positioned absolutely on the sides of the original element.

div {  position: relative;  } div:before {   box-shadow: -15px 0 15px -15px inset;   content: " ";   height: 100%;   left: -15px;   position: absolute;   top: 0;   width: 15px; }  etc... 

回答3:

Try this, it's working for me:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333; 

回答4:

Classical approach: Negative spread

CSS shadow uses 4 parameters: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black; 

The v-shadow (verical shadow) is set to 0.

The blur parameter adds the gradient effect, but adds also a little shadow on vertical borders.

Negative spread reduces the shadow on all borders: you can play with it trying to remove the little vertical shadow without affecting too much the other. (It can be simple for little shadows, like 5-10 px.)

Here a fiddle example.

---

Second approach: Absolute div on the side

Add an empty div in your element, and style it with absolute positioning so it doesen't affect the element content.

Here the fiddle with an example of left-shadow.

   
 
  .shadow{     position:absolute;     height: 100%;     width: 4px;     left:0px;     top:0px;     box-shadow: -4px 0 3px black; } 

---

Third: Masking shadow

If you have a fixed background, you can hide the side-shadow effect with two masking shadows having the same color of the background and blur = 0, example:

box-shadow:      0 -6px white,          // Top Masking Shadow     0 6px white,           // Bottom Masking Shadow     7px 0 4px -3px black,  // Left-shadow     -7px 0 4px -3px black; // Right-shadow 

I've added again a negative spread (-3px) to the black shadow, so it doesn't stretch beyond the corners.

Here the fiddle.

回答5:

This works fine for all browsers:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000; -moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000; box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000; 

回答6:

DEMO

You must use the multiple box-shadow; . Inset property make it look nice and inside

div {     box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);     width: 100px;     height: 100px;     margin: 50px;     background: white; } 

回答7:

Another way is with: overflow-y:hidden on the parent with padding.

#wrap {     overflow-y: hidden;     padding: 0 10px; } #wrap > div {     width: 100px;     height: 100px;     box-shadow: 0 0 20px -5px red; } 

http://jsfiddle.net/qqx221c8/

回答8:

NICE INSET SHADOW ON LEFT AND RIGHT SIDES FOR DIVS, IMAGES OR INNER CONTENTS

For a nice inset shadow in right and left sides on images, or any other content, use it this way

***The z-index:-1 does a nice trick when showing images or inner objects with insets

回答9:

In some situations you can hide the shadow by another container. Eg, if there is a DIV above and below the DIV with the shadow, you can use position: relative; z-index: 1; on the surrounding DIVs.

回答10:

For horizontal only, you can trick the box-shadow using overflow on its parent div:

   
content
 
  .parent{   overflow:hidden; } .box-shadow{   box-shadow: box-shadow: 0 5px 5px 0 #000; } 

回答11:

Another idea could be creating a dark blurred pseudo element eventually with transparency to imitate shadow. Make it with slightly less height and more width i.g.

文章来源: How to get box-shadow on left & right sides only