box-shadow 只在元素的一侧？ [复制]答案

【问题标题】：box-shadow only on one side of an element? [duplicate]box-shadow 只在元素的一侧？ [复制]
【发布时间】：2011-12-11 11:17:37
【问题描述】：

可能重复：
drop shadow only bottom css3

我已经为此苦苦挣扎了一段时间，想知道是否有办法创建一个具有模糊但仅出现在元素一侧的box-shadow。

我已经设置了JSFiddle，你可以看到模糊仍然显示在元素的顶部和底部？有什么想法吗？

【问题讨论】：

【解决方案1】：

又是我。

我已经想通了。我像这样使用:before CSS 选择器

.element:before
{
content:'';
position:absolute;
left:-5px;
right:100%;
top:0;
bottom:0;
box-shadow: -10px 0 20px #aaa;
}

如果有人需要知道如何操作，我已经编辑了我的JSFiddle。

【讨论】：

【解决方案2】：

我不确定这是一个完美的解决方案，但您可以为您的 div 创建一个容器并通过减小内部 div 的宽度并根据您想要阴影的哪一侧来左右浮动来隐藏 3 面。我用固定witdh来宾，它会更容易管理。

【讨论】：