css - 仅在元素左侧的 Box-Shadow

Question

我一直无法在元素的左侧设置盒子阴影。

我试过这个：

.box {
    box-shadow: -10px 0px 3px 0px #aaa;
}

<div class="box">Example element</div>

然而，盒子阴影看起来更像一条灰线，缺乏我在使用盒子阴影时习惯的常规阴影效果。此外，上面的示例包括一个我试图摆脱的小顶盒阴影。

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

Answer 3

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

Answer 4

box-shadow: -15px 0px 17px -7px rgba(0,0,0,0.75);

解释：

第一个 px 值是“水平长度”设置为 -15px 以将阴影定位在左侧，下一个 px 值设置为 0，因此阴影顶部和底部居中以最小化顶部和底部阴影。

第三个值（17px）称为模糊半径。数字越高，阴影越模糊。然后最后一个 px 值 -7px 是散布半径，正值会增加阴影的大小，负值会减小阴影的大小，在 -7px 时它会阻止阴影出现在项目的上方和下方。

参考： CSS Box Shadow 属性