标签：
直接入正题，以下是两种实现方法的html部分：
1 <div class="one"> 2 <em></em><span></span> 3 我是第一个对话框 4 </div> 5 <div class="two"> 6 我是第二个对话框 7 </div>
第一种的CSS样式如下：
1 /*one CSS气泡框*/ 2 .one { 3 position: relative; width: 300px; height: 100px; border: 3px solid #09f; 4 } 5 .one em, .one span{ 6 position: absolute; top: 100px; left: 20px; display: block; border-width: 15px; border-style: solid dashed dashed; 7 } 8 .one em { 9 border-color:#09F transparent transparent; 10 } 11 .one span { 12 top: 96px; border-color:#FFF transparent transparent; 13 }
第二种的CSS样式如下：
/*two 使用继承*/ .two { position: relative; width: 300px; height: 100px; border: 3px solid #f60; background: #fff; } .two::after { position:absolute; bottom: -12px; left: 20px; padding: 8px; border:inherit; border-left: none; border-top: none; content:""; background: inherit;
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }
从以上代码看，不容易看出第二种方法无论是从html还是从CSS看，都更简洁。第二种方法使用一个标签，运用伪类和继承。不仅简单明了，改动起来也更方便。
标签：
原文地址：http://www.cnblogs.com/shifan/p/5596025.html
