怎么能像图像中的盒子一样制作div？

Question

我想尝试这样做

当我打开页面时，我需要在页面中心弹出一个窗口，所以我创建了一个div并将其显示设置为“没有”＃39; 。在document.ready中，我就像是

$("document").ready(function (){
   $(".box").show();


});

所以它会显示div。

但我希望我的div就像附加图像中的弹出窗口一样。我怎么能用3D小阴影和所有??

制作一个div

更新代码

-webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;

它只给出了底部和右边的阴影。

Answer 1

将.box { box-shadow:-1px 2px 0.2em grey }放入CSS应该会使它像图像一样。

Answer 2

.box {
  background-color: #FFF;
  width: 180px;
  height: 80px;
  box-shadow: 1px 1px 5px 1px rgba(255,255,255,0.5); /* x-offset y-offset blur size color */
}

对于多浏览器支持，请使用以下前缀：
-o-箱阴影
-MS-箱阴影
-moz-箱阴影
-webkit-箱阴影

要获得所需的结果，请使用x偏移，y偏移，模糊和大小属性。

尝试这样的事情：

box-shadow: 0px 1px 4px 1px #777;

Answer 3

您可以借助http://www.cssmatic.com/box-shadow：

创建它

.scenario-callout-text-right {
    width: 400px;
    height: 200px;
    -webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
}