如何解决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\');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。