Web-kit css div shadow：是否有可能把它放在与纯CSS的div或需要图像？

Question

所以我需要的是简单的：用户按下东西，用户看到所有页面顶部的新的div阴影效果（DIV中心窗口）（1/4大小例如）都

是否有可能与一些纯粹的web-kit css艺术？或者需要JavaScript +图像组合？以及如何做这样的事情？

Answer 1

从这个报价：

网络套件CSS DIV的影子：是否有可能 把它放到格纯CSS

这一个：

用户在看到新的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端（模态窗口）之后，对方的回答涵盖了它相当彻底。

Answer 2

您正在寻找什么可以被称为一个模态窗口。它可以使用CSS3 properties完成，但仅支持IE9 +，Firefox 4，Chrome和Opera。

对于一个跨浏览器的解决方案，你应该看看能呈现相同效果的JavaScript脚本。有许多流行的包，比如Lightbox，ShadowBox，ThickBox，FaceBox等

如果您正在使用ASP.NET，有ModalPopupExtender在AJAXToolkit，这将给你的影响。

Answer 3

你需要两样东西一个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'); 

}