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

Question

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

Answer 1

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/

Answer 2

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

第一个值是在X中的阴影的位置， 第二是在Y的阴影的位置， 第三是影子尺寸， 第四颜色。

通过放置阴影尺寸的一半的负位置Y，您的元素底部不会有阴影。

Answer 3

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

Answer 4

你可以把你的箱子在一个又一个，较小，高度和宽度所定义，具有溢出隐藏，并用相对位置，你隐藏你不想要的影子。

Answer 5

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

Answer 6

我还没有找到一个体面的方式，可以在所有情况下工作。这里有两种方法：

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

边框圆角这两种解决方案不转

但是很好。