Question

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

Answer 1

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

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

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

Answer 2

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

Answer 3

已被问过数百万次。只需使用spread参数使其变小，然后将其移动，使其仅显示在一侧。类似的问题：drop shadow only bottom css3

Answer 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;
}

然而，对于border-radius而言，两种解决方案都不是很好。

Answer 5

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

Answer 6

box-shadow属性允许Web设计人员在框元素上轻松实现多个阴影（外部或内部），指定颜色，大小，模糊和偏移的值。

属性语法如下：

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/

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

6 个答案: