CSS3对话气泡特效

每当讨论到对话气泡时，无数的用户界面用途就会浮现出来。这些可以用于处理讨论评述，或者创建公告版，或者显示引用文本。只需将下面的类加入你的样式表，你也可以从这贴 CSS3代码片段，找到相关的HTML代码。
[codesyntax lang=”css”]

    .chat-bubble {  
        background-color: #ededed;  
        border: 2px solid #666;  
        font-size: 35px;  
        line-height: 1.3em;  
        margin: 10px auto;  
        padding: 10px;  
        position: relative;  
        text-align: center;  
        width: 300px;  
        -moz-border-radius: 20px;  
        -webkit-border-radius: 20px;  
        -moz-box-shadow: 0 0 5px #888;  
        -webkit-box-shadow: 0 0 5px #888;  
        font-family: 'Bangers', arial, serif;   
    }  
    .chat-bubble-arrow-border {  
        border-color: #666 transparent transparent transparent;  
        border-style: solid;  
        border-width: 20px;  
        height: 0;  
        width: 0;  
        position: absolute;  
        bottom: -42px;  
        left: 30px;  
    }  
    .chat-bubble-arrow {  
        border-color: #ededed transparent transparent transparent;  
        border-style: solid;  
        border-width: 20px;  
        height: 0;  
        width: 0;  
        position: absolute;  
        bottom: -39px;  
        left: 30px;  
    }

[/codesyntax]

转载请注明：TUTERM.COM » CSS3对话气泡特效