贴几个CSS对话框，我觉得很实用的~！ 原文我已经不知道是从哪儿看的了，做互联网的普遍可以分为三个阶段：拿来主义,自力更生,追求卓越(此话非原创)，我觉得自己现在还是处于拿来主义.... 希望和大家多多交流，希望老鸟看到了别吐舌头，因为总会有人不知道或者不明白的，你可以路过~！
先看一下总体的效果是这样的：
http://home.100tiyan.com/attachment/201006/14/4025_1276504891f5Dq.jpg基本的原理就是设置border，然后利用border的各个边配合和border transperent结合实现的，也有利用两个拼凑结合的。
http://home.100tiyan.com/attachment/201006/14/4025_1276506274vEfZ.jpg代码:
【CSS】
.bor{ width:10px;height:10px;border-width:30px;border-style:solid;border-color:blue yellow red gray}
【html】
<div class="bor"></div>
http://home.100tiyan.com/attachment/201006/14/4025_12765048873tp2.jpg代码:
【CSS】
.test{width:300px; padding:20px 15px;border:5px solid #beceeb; position:relative;margin:30px 0 0 10px}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{border-width:20px; border-style:dashed dashed solid; border-color:transparent transparent #beceeb; left:20px;top:-40px}
.test span.top{border-width:20px; border-style:dashed dashed solid; border-color:transparent transparent #ffffff; left:20px; top:-33px}
【html】
<div class="test">
<span class="bot"></span>
<span class="top"></span>
CSS气泡对话框效果走着。。。
</div>
http://home.100tiyan.com/attachment/201006/14/4025_1276504888MfXm.jpg代码:
【CSS】
.demo{ width:500px;height:80px;border:5px solid #EBEFF9;position:relative;margin:30px 0 0 10px}
.demo ul{ padding:10px 15px}
.demo ul li{ width:100%;padding-bottom:5px}
.demo span{ width:0;height:0;font-size:0;overflow:hidden;position:absolute}
.demo span.bot{ border-width:20px;border-style:solid dashed dashed;border-color:#EBEFF9 transparent transparent;right:30px;bottom:-40px}
.demo span.top{ border-width:20px;border-style:solid dashed dashed;border-color:#ffffff transparent transparent;right:30px;bottom:-33px}
【html】
<div class="demo">
<ul>
<li>第一排齐刷刷。</li>
<li>第二排也齐刷刷。</li>
</ul>
<span class="bot"></span>
<span class="top"></span>
</div>
http://home.100tiyan.com/attachment/201006/14/4025_12765048880UfZ.jpg代码:
【CSS】
.demo2{ width:300px;height:50px;background:#beceeb;position:relative;margin:50px 0 0 35px}
.demo2 ul{ padding:10px 15px}
.demo2 ul li{ width:100%;padding-bottom:5px}
.demo2 span{ width:0;height:0;font-size:0;overflow:hidden;position:absolute}
.demo2 span.bot{ border-width:10px;border-style:solid;border-color:#ffffff #D6E0F5 #D6E0F5 #ffffff;left:-20px;top:30px}
.demo2 span.top{ border-width:10px 20px;border-style:dashed solid solid dashed;border-color:transparent #ffffff #ffffff transparent;left:-40px;top:40px}
【html】
<div class="demo2">
<ul>
<li>注意啦，这是第二个demo啦！</li>
<li>知道啦，确实是第二个啦！</li>
</ul>
<span class="bot"></span>
<span class="top"></span>
</div>
http://home.100tiyan.com/attachment/201006/14/4025_1276504889hI7D.jpg代码:
【CSS】
.demo3{ width:500px;height:60px;background:#beceeb;position:relative;margin:40px 0 0 5px}
.demo3 ul{ padding:10px 15px;}
.demo3 ul li{ width:100%;padding-bottom:5px}
.demo3 span.tri{ width:0;height:0;font-size:0;border-width:20px;border-style:dashed solid dashed dashed;border-color:transparent #beceeb #beceeb transparent;position:absolute;right:30px;top:-16px}
【html】
<div class="demo3">
<ul>
<li>这已经是第三个啦，再做我就熟练啦！ 嘿嘿</li>
<li>第三个啦，第三个啦！</li>
</ul>
<span class="tri"></span>
</div>
还有一种我研究了好一会儿，左拼右凑还是没能实现（就是下面这种效果的），希望有大大可以跟帖分享一下！
http://home.100tiyan.com/attachment/201006/14/4025_1276505996gghg.jpg
登录
注册
FAQ
可以不错！