Box-Shadow仅在元素的左侧

Question

我一直无法在元素的左侧设置框阴影.

我试过这个:

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

但是,框阴影看起来更像是一条灰线,并且缺少使用box-shadow时常用的阴影效果.此外,上面的例子包括一个我想要摆脱的小顶盒阴影.

谢谢

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 的高度、宽度甚至填充以仅显示左框阴影，但它有效。 看这里的例子如果你看这个例子，你会看到没有其他阴影，只有一个黑色的左侧阴影。编辑：这是同一屏幕截图的重拍，以防有人认为我只是裁剪了正确的。你可以在这里找到