Web-kit CSS div阴影：是否可以将其放在带有纯CSS的div上或需要图像？

问题描述

| 所以我需要的很简单：用户按一下，用户在所有页面（例如1/4尺寸）顶部的新div（以div为中心的窗口）上看到阴影效果 某些纯Web工具包CSS艺术有可能吗？还是需要javascript + images组合？以及如何做这样的事情？     

解决方法

        从这句话：   Web-kit CSS div阴影：是否可能   用纯CSS将它放到div上 和这个：   用户在新的div上看到阴影效果 似乎您在问是否可以使用CSS在内部ѭ0周围创建“阴影”效果。 Chrome \的设置页面正在使用CSS3 \的

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在那些浏览器中模拟ѭ1。 如果您不喜欢JavaScript的操作方法（模态窗口），另一个答案将非常详尽地介绍它。     ,        您要查找的内容可以称为模式窗口。可以使用CSS3属性完成此操作，但仅IE9 +，Firefox 4，Chrome和Opera支持。 对于跨浏览器解决方案，您应该查看可以呈现相同效果的javascript脚本。有许多流行的软件包，例如Lightbox，ShadowBox，ThickBox，FaceBox等。 如果使用的是ASP.NET，则AJAXToolkit中有ModalPopupExtender，它将为您带来效果。     ,        对于具有框阴影的对话框，您需要两个元素一个div，而在对话框后面需要另一个div，其不透明度为50％左右。可以在大多数浏览器（包括ie）中使用某些CSS来完成此操作。阅读这篇文章，了解如何在所有浏览器中使用箱形阴影：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,Color=\'#000000\');

}