纯Css三角箭头的DIV气泡提示框，有阴影效果

发布时间：2018-09-07 20:37:19 所属栏目：Unix 来源：站长网

导读：纯Css三角箭头的DIV气泡提示框，有阴影效果，烈火小编刚刚看到这个效果时很难相信竟然是纯CSS的，没有使用图片也能实现这样的效果，看来作者是一个CSS高手，大家好好研究一下吧。尤其在效果中，还给提示框增加了阴影，这里应用了滤镜的使用。特效演示：

　　纯Css三角箭头的DIV气泡提示框，有阴影效果，烈火小编刚刚看到这个效果时很难相信竟然是纯CSS的，没有使用图片也能实现这样的效果，看来作者是一个CSS高手，大家好好研究一下吧。

　　尤其在效果中，还给提示框增加了阴影，这里应用了滤镜的使用。

　　特效演示：

<html> <head> <title>无图片带箭头的DIV方框</title> <style> div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{ position:absolute; top:-20px; *top:-22px; left:20px; display:block; height:0; width:0; font-size: 0; line-height: 0; border-color:transparent transparent #666 transparent; border-style:dashed dashed solid dashed; border-width:10px; } i{position:absolute; top:-9px; *top:-9px; left:-10px; display:block; height:0; width:0; font-size: 0; line-height: 0; border-color:transparent transparent #fff transparent; border-style:dashed dashed solid dashed; border-width:10px; } .content{ border:1px solid #666; -moz-border-radius:3px; -webkit-border-radius:3px; position:absolute; background-color:#fff; width:100%; height:100%; *top:-2px; *border-top:1px solid #666; *border-top:1px solid #666; *border-left:none; *border-right:none; *height:102px; box-shadow: 3px 3px 4px #999; -moz-box-shadow: 3px 3px 4px #999; -webkit-box-shadow: 3px 3px 4px #999; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; } </style> </head> <body> <div class="container"> <div class="content"><br>不用图片，一样可以实现三角箭头的DIV（气泡）提示框！</div> <s> <i></i> </s> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

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