CSS3黑色阴影

时间:2013-07-03 14:52:09

标签: css3 shadow

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

我想在我的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);
}

提前致谢

enter image description here

1 个答案:

答案 0 :(得分: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/