Box-Shadow仅在元素的左侧

Question

我一直无法在元素左侧设置方框阴影。

我试过了：

box-shadow: -10px 0px 3px 0px #aaa;

然而，盒子阴影看起来更像是灰色线条，并且缺少使用盒子阴影时常用的阴影效果。此外，上面的例子包括一个我试图摆脱的小顶盒阴影。

谢谢

Answer 1

你可能需要更多的模糊和更少的传播。

box-shadow: -10px 0px 10px 1px #aaaaaa;

尝试使用方框阴影生成器http://css3generator.com/进行处理，直到获得所需的效果。

Answer 2

这个问题非常非常非常老，但是作为将来的技巧，我建议使用类似的方法：

.element{
    box-shadow: 0px 0px 10px #232931;
}
.container{
    height: 100px;
    width: 100px;
    overflow: hidden;
}

基本上，您有一个框阴影，然后将元素包装在div中，且其溢出设置为隐藏。您需要调整div的高度，宽度，甚至填充以仅显示左框阴影，但是它可以工作。 See here for an example如果查看示例，您将看到没有其他阴影，而只有黑色的左侧阴影。 编辑：这是同一张屏幕截图的重拍，以防万一有人认为我刚刚裁剪正确。您可以找到它here

Answer 3

盒子阴影：-15px 0px 17px -7px rgba（0,0,0,0.75）;

第一个px值是将“水平长度”设置为-15px，以将阴影向左放置，下一个px值设置为0，因此阴影的顶部和底部居中以最小化顶部和底部的阴影。 / p>

第三个值（17像素）称为模糊半径。数字越高，阴影将越模糊。最后一个px值-7px为扩展半径，正值增加阴影的大小，负值减小阴影的大小，为-7px时，阴影不会出现在项目的上方和下方。

参考： CSS Box Shadow Property

Answer 4

box-shadow: inset 10px 0 0 0 red;