CSS 对话框的实现
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 对话框的实现相关的知识，希望对你有一定的参考价值。
直接入正题，以下是两种实现方法的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看，都更简洁。第二种方法使用一个标签，运用伪类和继承。不仅简单明了，改动起来也更方便。
以上是关于CSS 对话框的实现的主要内容，如果未能解决你的问题，请参考以下文章