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'); 

}