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

2019-01-03 19:54发布

站内问答 / HTML/CSS
477 13 4

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.

标签： html css css3
举报
13条回答
唯我独甜
2楼-- · 2019-01-03 20:09

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/

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-01-03 20:10

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...
查看更多
0人赞 添加讨论(0) 举报
走好不送
4楼-- · 2019-01-03 20:11

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

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
5楼-- · 2019-01-03 20:12

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/

查看更多
0人赞 添加讨论(0) 举报
Melony?
6楼-- · 2019-01-03 20:12

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.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
7楼-- · 2019-01-03 20:14

Classical approach: Negative spread

CSS box-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 (the one we want to get rid of).

Negative spread reduces the shadow on all borders: you can play with it trying to remove that little vertical shadow without affecting too much the one obn the sides (it's easier for small shadows, 5 to 10px.)

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.

<div id="container">
  <div class="shadow"></div>
</div>

.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.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)