CSS3黑色阴影

Question

我有一个关于盒子阴影的问题，所以我有一个这种效果的图片。

我想在我的Jsfiddle示例中像这个图像一样的效果。

http://jsfiddle.net/aldimeola1122/EAb3V/2/

这是我的CSS代码：

#wrapper{ 
    background:url("http://ealtinel.com/bg1.jpg") no-repeat; 
    width:1000px; 
    height:1000px; 
} 

#probe{ 
position: absolute; 
margin-top:100px; 
margin-left:200px;; 
z-index: 9999; 
height: 35px; 
width: 138px; 
background:#fff; 
padding-left: 20px; 
padding-top: 14px; 
border-radius: 25px; 
-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
transition: width 0.5s; 
-moz-transition: width 0.s; 
-webkit-transition: width 0.5s; 
-o-transition: width 0.5s; 
-webkit-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75); 
box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75); 
} 

在此先感谢

Answer 1

我编辑你的CSS，我打得四处不同的调整了一段时间，并得到了它尽可能接近我认为你将能够：

http://jsfiddle.net/EAb3V/3/

下面是我修改的CSS：

前：

-webkit-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75); 
box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75); 

后：

-webkit-box-shadow: 0px 1px 25px rgba(19, 19, 19, 0.50); 
-moz-box-shadow: 0px 1px 25px rgba(19, 19, 19, 0.50); 
box-shadow:   0px 1px 25px rgba(19, 19, 19, 0.50); 

这里是另一个版本我做了，我加了一个2px的边框稍深那么背景： http://jsfiddle.net/EAb3V/4/

-webkit-box-shadow: 0px 1px 20px rgba(19, 19, 19, 0.40); 
-moz-box-shadow: 0px 1px 20px rgba(19, 19, 19, 0.40); 
box-shadow:   0px 1px 20px rgba(19, 19, 19, 0.40); 
border: 2px solid #cd870f; 

也有工具，有助阵，像这样一个在这里我找到最好框中阴影： http://css3gen.com/box-shadow/