★兼容性好的CSS对话框特效★

请勿抄袭本页面

---

代码说明

CSS实现的对话框特效，纯CSS实现的，不是CSS3，因此兼容性还是相当不错的。你在网页上可以使用一些这样的框框，比较个性。通过本代码您还可以掌握一些CSS的相对定位、绝对定位的相关技巧。不过我个人认为，实现的代码略稍复杂，各位CSS高手可优化下。转自源码爱好者

---

html代码

<style type="text/css"> .arrow{position: relative;width: 20px;height: 20px;margin: 0 0 0 15px;} .arrow .arrow_border,.arrow .arrow_content{width: 0;height: 0;overflow: hidden;border-width: 10px;border-style: dashed dashed solid dashed;} .arrow .arrow_border{border-color: transparent transparent #CCCCCC transparent;} .arrow .arrow_content{border-color: transparent transparent #EEEEEE transparent;position: absolute;top: 1px;} .main{width: 100%;} .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height: 1px;overflow: hidden;display: block;} .b1,.b8{height: 0px;margin: 0 5px;} .b1{border-bottom: #CCC solid 1px;} .b8{border-top: #CCC solid 1px;} .b2,.b3,.b4,.b5,.b6,.b7{border-left: #CCC solid 1px;border-right: #CCC solid 1px;} .b2,.b7{margin: 0 3px;border-width: 2px;} .b3,.b6{margin: 0 2px;} .b4,.b5{margin: 0 1px;height: 2px;} .b2,.b3,.b4,.b5,.b6,.b7,.content{background-color: #EEE;} .content{border-left: solid #CCC 1px;border-right: solid #CCC 1px;padding: 25px;position: relative;} .content span{font-size: 72px;color: #CCCCCC;position: absolute;} .content span.font-left{top: -10px;left: -30px;_left: -55px;/* 为了兼容IE6.0*/} .content span.font-right{bottom: -45px;right: -30px;} .content p{text-indent: 2em;} .content p.translation{text-align: right;font-style: italic;} </style> <div class="arrow"> <div class="arrow_border"></div> <div class="arrow_content"></div> </div> <div class="main"> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> <div class="content"> <span class="font-left">“</span> <span class="font-right">”</span> <p>尊敬的用户：您专享激活送1G闲时随意玩流量活动，本月所赠5元随意玩赠款已到帐，欢迎您的使用!湛江联通</p> </div> <b class="b5"></b> <b class="b6"></b> <b class="b7"></b> <b class="b8"></b> </div>

---

代码演示

---

[代码仅供参考，转载请注明出处]

---