CSS 仅元素左侧的 Box-Shadow
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10463208/
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
Box-Shadow on the left side of the element only
提问by AnchovyLegend
I have been having trouble setting a box shadow on the left side of an element only.
我一直无法仅在元素的左侧设置框阴影。
I tried this:
我试过这个：
box-shadow: -10px 0px 3px 0px #aaa;
However, the box shadow looks more like a grey line and lacks the regular shadow-effect that I am used to when using box-shadow. Also, the above example includes a small top box-shadow that I am trying to get rid of.
然而，框阴影看起来更像是一条灰色的线条，缺乏我在使用框阴影时习惯的常规阴影效果。此外，上面的例子包括一个我试图摆脱的小顶盒阴影。
Thank you
谢谢
回答by Gregg B
You probably need more blur and a little less spread.
你可能需要更多的模糊和更少的传播。
box-shadow: -10px 0px 10px 1px #aaaaaa;
Try messing around with the box shadow generator here http://css3generator.com/until you get your desired effect.
尝试在http://css3generator.com/ 处使用框阴影生成器，直到获得所需的效果。
回答by Ad Charity
This question is very, very, very old, but as a trick in the future, I recommend something like this:
这个问题非常、非常、非常古老，但作为未来的一个技巧，我推荐这样的东西：
.element{
box-shadow: 0px 0px 10px #232931;
}
.container{
height: 100px;
width: 100px;
overflow: hidden;
}
Basically, you have a box shadow and then wrapping the element in a div with its overflow set to hidden. You'll need to adjust the height, width, and even padding of the div to only show the left box shadow, but it works. See here for an exampleIf you look at the example, you can see how there's no other shadows, but only a black left shadow. Edit: this is a retake of the same screen shot, in case some one thinks that I just cropped out the right. You can find it here
基本上，您有一个框阴影，然后将元素包装在一个 div 中，并将其溢出设置为隐藏。您需要调整 div 的高度、宽度甚至填充以仅显示左框阴影，但它有效。 看这里的例子如果你看这个例子，你会看到没有其他阴影，只有一个黑色的左侧阴影。编辑：这是同一屏幕截图的重拍，以防有人认为我只是裁剪了正确的。你可以在这里找到
回答by Message Akunna
box-shadow: -15px 0px 17px -7px rgba(0,0,0,0.75);
框阴影：-15px 0px 17px -7px rgba(0,0,0,0.75);
The first px value is the "Horizontal Length" set to -15px to position the shadow towards the left, the next px value is set to 0 so the shadow top and bottom is centred to minimise the top and bottom shadow.
第一个 px 值是“水平长度”设置为 -15px 以将阴影定位到左侧，下一个 px 值设置为 0，因此阴影顶部和底部居中以最小化顶部和底部阴影。
The third value(17px) is known as the blur radius. The higher the number, the more blurred the shadow will be. And then last px value -7px is The spread radius, a positive value increases the size of the shadow, a negative value decreases the size of the shadow, at -7px it keeps the shadow from appearing above and below the item.
第三个值（17px）称为模糊半径。数字越大，阴影越模糊。然后最后一个 px 值 -7px 是传播半径，正值增加阴影的大小，负值减小阴影的大小，-7px 防止阴影出现在项目的上方和下方。
reference: CSS Box Shadow Property
参考： CSS 框阴影属性
回答by Francisco
box-shadow: inset 10px 0 0 0 red;
