CSS3 盒子阴影问题答案

【问题标题】：CSS3 box shadow issueCSS3 盒子阴影问题
【发布时间】：2012-03-07 14:50:01
【问题描述】：

使用这个 css 来制作阴影

-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;

如何从 div 的顶部和底部移除阴影并只留下水平阴影？这可能吗？

【问题讨论】：

我不认为这是可能的，也许是因为现实世界中没有这样的影子。 :)
@domanokz：想解释一下为什么它很重要？ “现实世界”与 CSS 有什么关系？
@mingos 你在问“现实世界”与计算机有什么关系吗？我们将真实事物虚拟化（文档电子表格等），阴影也是如此。
这样的阴影在具有多个光源的真实或虚拟世界中很容易实现。
@domanokz 不，我不是在问这个。我在问现实世界，特别是它的物理，与通过人工创建的元语言（如 CSS）表达的设计决策和/或艺术价值有什么关系。阴影取决于现实世界中的光源这一事实并不意味着您不能以不同的方式绘制它们。向萨尔瓦多·达利征求意见：P

标签： html css

【解决方案1】：

您可以对散布值（最后一个 px 值）使用负值，以使阴影不会散布到另一侧。但是，这只允许您将阴影添加到一侧；所以你可以添加多个阴影，用逗号分隔。

box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;

欲了解更多信息，请查看以下两个链接：

【讨论】：

您能否将您的建议应用到我的代码中？我身体不好

【解决方案2】：

是的，不是的。盒子阴影不能放在元素的一侧，除非你只是偏移它和/或改变散布，我怀疑这不是你想要的。

但是，您可以将元素放在设置了溢出的容器内。溢出属性影响盒子阴影。 Here's an example.

【讨论】：

【解决方案3】：

有两种方法可以做到这一点，但这取决于您是在寻找硬边还是软边。

方法一：

这里的诀窍是将您的盒子包装在一个容器中并将overflow:hidden 应用于容器。如果你给你的盒子左右边距与阴影距离相同，阴影只会在侧面可见；它将被夹在顶部和底部。

这是一个例子： http://jsfiddle.net/2Luef/1/

方法二：

或者，根据您要寻找的效果，您可以使用多个盒子阴影来做一些事情，如下所示： http://jsfiddle.net/2Luef/3/

它没有像上面那样的剪裁，但可以说是更好看。它也只使用一个 DOM 元素。

【讨论】：

【解决方案4】：

这样写：

CSS：

.parent{
 height:200px;
 margin:40px;
    overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}

HTML

<div class="parent">
    <div class="child"></div>
</div>

检查这个http://jsfiddle.net/k9kVZ/2/

【讨论】：

这正是我在回答中所建议的:)。