纯CSS带箭头阴影的提醒框代码，不兼容IE

发布时间：2018-08-20 09:44:49 所属栏目：活动来源：站长网

导读：纯CSS实现带箭头阴影的提醒框，代码在 IE赏识器下不兼容，实现的结果为方形！可是在火狐、 Chrome 赏识器等下都可以正常行使，有好手的话请指点一下是那边的缘故起因，趁便也给猛火反馈一下哦。演示： !doctype htmlhtmlheadtitle带箭头阴影的提醒框/titlest

　　纯CSS实现带箭头阴影的提醒框，代码在IE赏识器下不兼容，实现的结果为方形！可是在火狐、Chrome赏识器等下都可以正常行使，有好手的话请指点一下是那边的缘故起因，趁便也给猛火反馈一下哦。

　　演示：

<!doctype html> <html> <head> <title>带箭头阴影的提醒框</title> <style> .wrap{position:relative;} .bd{ background:#BDCEEF;width:301px;height:101px;margin:10px;position:relative;z-index:2; box-shadow: 5px 8px 11px rgba(0,0,0,0.4); -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .cor,.cor_s{ position:absolute; z-index:2; width:40px; height:40px; background:#BDCEEF; left:30px;bottom:-20px; transform: skewY(-45deg); -o-transform: skewY(-45deg); -webkit-transform: skewY(-45deg); -moz-transform: skewY(-45deg); } .cor_s{ z-index:1; box-shadow: 5px 8px 11px rgba(0,0,0,0.4); -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4); } </style> </head> <body> <div class='wrap'> <div class='bd'></div> <div class="cor"></div> <div class="cor_s"></div> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!