CSS 對話框的實現

直接入正題，以下是兩種實現方法的html部分：

<div class="one">
    <em></em><span></span>    
    我是第一個對話框
</div>
<div class="two">
    我是第二個對話框
</div>

第一種的CSS樣式如下：

/*one CSS氣泡框*/
.one {
    position: relative; width: 300px; height: 100px; border: 3px solid #09f;
}
.one em, .one span{
    position: absolute; top: 100px; left: 20px; display: block; border-width: 15px; border-style: solid dashed dashed; 
}
.one em {
    border-color:#09F transparent transparent; 
}
.one span {
    top: 96px; border-color:#FFF transparent transparent;
}

第二種的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看，都更簡潔。第二種方法使用一個標簽，運用偽類和繼承。不僅簡單明了，改動起來也更方便。