盒子阴影效果可以应用于 div 的左右两侧吗？ [复制]答案

【问题标题】：Can box-shadow effect be applied to just left & right sides of a div? [duplicate]盒子阴影效果可以应用于 div 的左右两侧吗？ [复制]
【发布时间】：2013-12-02 18:11:25
【问题描述】：

是否可以只将盒子阴影应用于 div 的左右两侧？

box-shadow: 0px 0 20px rgba(0,0,0,.4);

我尝试将其更改为以下几种：

box-shadow: 0, foo, 0, foo;

但效果并不好。

在下图中，我想删除底线（和顶线，但您在这张图中看不到）。

如果可能，我宁愿不使用图片。

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过在 :before 和 :after 上设置 box-shadow 来做到这一点

div:before {
    box-shadow: -15px 0 15px -15px inset;
}
div:after {
    box-shadow: 15px 0 15px -15px inset;
}

http://jsfiddle.net/Qq5tQ/

【讨论】：

这只是一个混乱的解决方案，而且跨浏览器看起来不太好
乱七八糟怎么办？它在 IE、Safari、Firefox 和 Chrome 中运行良好。如果你对回答你问题的人无礼，那么没有人愿意帮助你。
如果我听起来很粗鲁，我很抱歉，但我完全按照你的方式使用了代码，它不适合。左阴影显示正常，右阴影离线，位于容器下方。 jsfiddle.net/QpHu7 不管怎样，我决定不找到解决办法，而是做了其他事情。

【解决方案2】：

基本上做到这一点的方法是在它上面使用另一个盒子阴影，这样你的 css 就会看起来像这样：

box-shadow: 0px -45px white,0px 22px white, 2px 0 20px rgba(0,0,0,.4)

【讨论】：

这会在覆盖在我的导航菜单顶部的 div 上方添加白色。不是一个有用的提示。
只是重申一下，对于我目前的情况来说，这不是一个有用的提示......但可能对其他人有用:)