我怎样才能只在某些方面获得盒子阴影？答案

【问题标题】：How can I get box-shadow only on certain sides?我怎样才能只在某些方面获得盒子阴影？
【发布时间】：2011-08-24 20:44:38
【问题描述】：

需要为仅出现在底部的box-shadow 定义哪些值。

【问题讨论】：

标签： css

【解决方案1】：

.element{box-shadow:0 -5px 10px #000}

第一个值是阴影在 X 上的位置，第二个是阴影在 Y 上的位置，第三是阴影维度，第四种颜色。

通过设置阴影尺寸一半的负 Y 位置，元素底部不会出现阴影。

【讨论】：

您可以将第二个值 (-5px) 增加到类似 (-8px) 以减少框下方的阴影，但您会在顶部获得更大的阴影：S
关于部分边框，你的标签上不能有border-bottom: none 吗？

【解决方案2】：

你可以把你的盒子放在另一个更小的盒子里，定义了高度和宽度，隐藏溢出，并通过相对位置隐藏你不想要的阴影。

【讨论】：

【解决方案3】：

这已被问过数百万次。只需使用扩展参数使其更小，然后移动它使其仅出现在一侧。类似问题：drop shadow only bottom css3

【讨论】：

【解决方案4】：

我仍然没有找到一种在所有情况下都可以使用的体面的方式。这里有两种方法：

1.) http://jsfiddle.net/pGGXH/28/ - 使用填充+溢出来显示阴影。

<div class="no-overflow">
   <div class="box">my box</div>
</div>

.no-overflow {
    overflow:hidden;
    padding:5px 5px 0 5px;
}
.box {
    border:1px solid #000;
    border-radius:5px;
    box-shadow:0 0 5px #333;
    padding:10px;
}

2.) http://jsfiddle.net/pGGXH/33/ - 使用堆叠边框阴影（您可以将多个边框阴影堆叠在一起）

<div class="box">my box</div>

.box {
    border:1px solid #000;
    border-radius:5px;
    box-shadow:0 10px 0 #fff, 0 0 5px #333;
    padding:10px;
}

但是，对于边界半径，两种解决方案的结果都不是很好。

【讨论】：

【解决方案5】：

看来这是不可能的（http://www.w3.org/TR/css3-background/#the-box-shadow），你必须尝试一些长度值。

【讨论】：

【解决方案6】：

box-shadow 属性允许网页设计师轻松地在盒子元素上实现多个阴影（外部或内部），指定颜色、大小、模糊和偏移的值。

属性语法如下：

box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ]

例如；

box-shadow: 3px -3px 3px #000000; //Shadow towards North East direction.

在这里检查和实验...http://jsfiddle.net/jgsdS/

【讨论】：