Question

所以我需要的是简单：用户按下某些东西，用户在所有页面顶部（例如1/4大小）上看到对新div（div居中窗口）的阴影效果 chrome set up page

是否可以使用一些纯粹的web-kit css艺术？还是需要javascript +图像组合？怎么做这样的事情？

Answer 1

您正在寻找的东西可称为模态窗口。可以使用CSS3 properties完成，但仅在IE9 +，Firefox 4，Chrome和Opera中支持。

对于跨浏览器解决方案，您应该查看可以呈现相同效果的javascript脚本。有许多受欢迎的软件包，例如Lightbox，ShadowBox，ThickBox，FaceBox等。

如果您使用的是ASP.NET，AJAXToolkit中会有ModalPopupExtender，它会为您提供效果。

Answer 2

对于带有box-shadow的对话框，你需要两个div作为div，而另一个div位于你的对话框后面，不透明度为50％左右。这可以通过大多数浏览器中的一些css来完成，包括ie。阅读本文，了解如何在所有浏览器中使用box-shadow工作：http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

所以你的HTML看起来像这样：

<div class="overlay"/>
<div class="dialogbox">someContent</div>

和你的css：

.overlay {
     position:absolute; 
     height: 100%; 
     width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  opacity: 0.5;
}
.dialogbox{ 
    width: 200px; 
    height: 150px; 
    margin: auto;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

Answer 3

从这句话开始：

Web-kit css div shadow：是否有可能用纯css把它放到div上

和这一个：

用户在新div上看到阴影效果

好像你在问是否可以使用CSS在内部div周围创建“阴影”效果。

Chrome的设置页面正在使用CSS3's box-shadow执行此操作：

-webkit-box-shadow: 0 5px 80px #505050;

box-shadow适用于以下浏览器：http://caniuse.com/css-boxshadow

和跨浏览器的CSS是：

-webkit-box-shadow: 0 5px 80px #505050;
-moz-box-shadow: 0 5px 80px #505050;
box-shadow: 0 5px 80px #505050;

http://jsfiddle.net/XHAbV/

如果您需要在旧版本的IE中使用它，可以使用CSS3 PIE模拟这些浏览器中的box-shadow。

如果您正在使用JavaScript方面（如模式窗口），另一个答案将非常彻底地介绍它。

Web-kit css div shadow：是否可以将它放在具有纯css的div上或需要图像？

3 个答案: