68

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

我试过这个：

.box {
    box-shadow: -10px 0px 3px 0px #aaa;
}
<div class="box">Example element</div>

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

4

4 回答 4

111

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

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

尝试在这里http://css3generator.com/使用盒子阴影生成器，直到你得到你想要的效果。

于 2012-05-05T15:29:50.453 回答
5

这个问题非常非常非常古老，但作为将来的一个技巧，我推荐这样的东西：

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

基本上，您有一个盒子阴影，然后将元素包装在一个 div 中，并将其溢出设置为隐藏。您需要调整 div 的高度、宽度甚至填充，以仅显示左框阴影，但它可以工作。 看这里的例子如果你看这个例子，你可以看到没有其他阴影，只有一个黑色的左阴影。编辑：这是对同一张屏幕截图的重拍，以防有人认为我只是剪掉了右边。你可以在这里找到

于 2019-12-18T22:04:31.500 回答
3 
box-shadow: inset 10px 0 0 0 red;
于 2018-04-05T08:54:58.417 回答
1 
box-shadow: -15px 0px 17px -7px rgba(0,0,0,0.75);

解释：

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

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

参考： CSS Box Shadow 属性

于 2020-03-06T12:05:39.460 回答