气泡消息框简单实现

没保存重新来

先看实现效果吧

分两部分：

（1）主消息框

<blockquote class="shi">床前明月光，疑是地上霜！</blockquote>

.shi{
    position: relative;
    width: 250px;
    height: 40px;
    background-color: blanchedalmond;
    text-align: center;　　　　　//水平居中
    line-height: 40px;　　　　　　//垂直居中
    -moz-border-radius:20px;   //圆角实现
    -webkit-border-radius:20px;
    border-radius:20px;
}

（2）下部尖角

.shi:after{
     content: "";
     position: absolute;
     display: block;
     border-width: 10px;
     border-style: solid;
     left: 20px;
     border-color: #FFEBCD transparent transparent;
 }

主要作用就是实现一个倒三角，空元素的边框宽度10px，然后设置其余三个透明，然后顶部边框显示就可以了，其他的也没啥了。。。。

好了这就简单的实现了一个气泡消息框。