仅在元素左侧的 Box-Shadow答案

【问题标题】：Box-Shadow on the left side of the element only仅在元素左侧的 Box-Shadow
【发布时间】：2012-05-05 15:19:30
【问题描述】：

我在仅在元素左侧设置框阴影时遇到了问题。

我试过了：

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

&lt;div class="box"&gt;Example element&lt;/div&gt;

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

【问题讨论】：

标签： css

【解决方案1】：

您可能需要更多的模糊和更少的散布。

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

尝试在http://css3generator.com/ 处使用盒子阴影生成器，直到获得所需的效果。

【讨论】：

谢谢！这有帮助，我想知道是否有可能摆脱所有顶部阴影，只留下左边的盒子阴影？ b/c 上面的例子仍然有一个小的顶部阴影...
当然，只使用负传播：box-shadow: -10px 0px 20px -5px #aaaaaa;
你也可以去掉顶部阴影，用另一个阴影隐藏它：见this answer。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

尽管此代码可能（或可能不会）解决问题，但一个好的答案总是需要解释它如何/为什么会有所帮助。
技术上不是答案，因为 OP 没有要求 inside 左侧的 box-shadow。

【解决方案4】：

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

说明：

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

第三个值（17px）称为模糊半径。数字越高，阴影越模糊。然后最后一个px值-7px就是散布半径，正值增大阴影大小，负值减小阴影大小，-7px不让阴影出现在item的上方和下方。

参考： CSS Box Shadow Property

【讨论】：