Html 如何仅在左侧和右侧获得框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11997032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get box-shadow on left & right sides only
提问by Jawad
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.
我在元素周围没有边界。
回答by deefour
NOTE:I suggest checking out @Hamish's answerbelow; it doesn't involve the imperfect "masking" in the solution described here.
注意：我建议查看下面@Hamish 的回答；它不涉及此处描述的解决方案中不完美的“掩蔽”。
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);
Edit
编辑
Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.
为顶部和底部前面添加另外 2 个框阴影以掩盖渗出的阴影。
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);
回答by Hamish
I wasn't satisfied with the rounded top and bottom to the shadow present in Deefour's solution so created my own.
我对 Deefour 解决方案中阴影的圆形顶部和底部不满意，因此创建了我自己的解决方案。
Inset box-shadow;creates a nice uniform shadow with the top and bottom cut off:
插入box-shadow;创建一个很好的均匀阴影，顶部和底部被切断：
box-shadow: -15px 0 15px -15px inset;
To use this effect on the sides of your element, create two pseudo elements :beforeand :afterpositioned absolutely on the sides of the original element.
要在元素的侧面使用此效果，请创建两个伪元素:before并将其:after绝对定位在原始元素的侧面。
div {
position: relative;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
etc...
回答by krishna kinnera
Try this, it's working for me:
试试这个，它对我有用：
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
回答by T30
Classical approach: Negative spread
经典方法：负点差
CSS box-shadowuses 4 parameters: h-shadow, v-shadow, blur, spread:
CSS box-shadow使用 4 个参数：h-shadow、v-shadow、blur、spread：
box-shadow: 10px 0 8px -8px black;
The v-shadow(verical shadow) is set to 0.
的V-阴影（中古立式阴影）被设置为0。
The blurparameter adds the gradient effect, but adds also a little shadow on vertical borders (the one we want to get rid of).
该模糊参数添加渐变效果，而且还增加了对垂直边框（我们想摆脱的一个）一点点影子。
Negative spreadreduces 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.)
负散布减少了所有边框上的阴影：您可以尝试删除那个小的垂直阴影，而不会影响侧面的阴影（对于小阴影更容易，5 到 10 像素。）
Here a fiddleexample.
这是一个小提琴示例。
Second approach: Absolute div on the side
第二种方法：绝对div在一边
Add an empty div in your element, and style it with absolute positioning so it doesen't affect the element content.
在您的元素中添加一个空 div，并使用绝对定位对其进行样式设置，以免影响元素内容。
Here the fiddlewith 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:
如果您有固定背景，则可以使用两个与背景颜色相同且模糊 = 0 的遮罩阴影来隐藏侧影效果，例如：
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.
我再次为黑色阴影添加了负扩展 (-3px)，因此它不会超出角落。
Here the fiddle.
这里是小提琴。
回答by Jibber
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;
回答by Ashisha Nautiyal
回答by John Magnolia
Another way is with: overflow-y:hiddenon the parent with padding.
另一种方法是：overflow-y:hidden在带有填充的父级上。
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
回答by Nitika Chopra
box-shadow: 0 5px 5px 0 #000;
It works on my side. Hope, it helps you.
它在我身边工作。希望，对你有帮助。
回答by BCDeWitt
For whatever reason the provided answers here just wouldn't work in my case. So, I got creative. Here's a new solution for you all that uses linear-gradient()in place of box-shadow.
无论出于何种原因，此处提供的答案在我的情况下都不起作用。于是，我有了创意。这是一个新的解决方案，用于linear-gradient()代替box-shadow.
p {
padding: 1rem;
background-color: #b55;
color: white;
background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}<p>Testing</p>Though I'm not looking to argue the point, this isn't really a "box" you (we) are trying to form, so I suppose it could be said that box-shadowdidn't make sense to begin with.
虽然我不想争论这一点，但这并不是你（我们）真正想要形成的“盒子”，所以我想可以说这box-shadow从一开始就没有意义。
回答by Gabriel Lima
I tried to copy the bootstrap shadow-sm just in the right side, here is my code:
我试图复制右侧的 bootstrap shadow-sm，这是我的代码：
.shadow-rs{
box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}
