纯css3实现漂亮的对话框----Day07

姑且先不来讨论css3跟css的区别，也不说html和html5的不同，虽然这很关键，但是现阶段还真的没整利落了，姑且就这些应用先用着，等自己有些见解了再来探讨那些深层次的问题。

先来给大家看几幅图片：

这些想必都不会陌生吧，你又是不是曾经为别人漂亮的对话框感叹呢，其实只用css3，我们同样可以实现这样的对话框样式，究竟该如何做呢，下面我们来简单分析下：

1、基本原理

其实很多东西就是这样，说白了就很简单了，这个的具体实现也不难，简单的说就是叠了起来，上面的部分和下面层露出的部分合起来拼成了一个图形，这时你首先会想起来的是什么，对z-index和position，当然这是肯定要用的，那还有什么呢，三角形transparent，对这是生成的关键，说到这里，你大概做到心中有数了吧，我们来简单的呈现下。

2、实现步骤

首先我们来编写html代码

<div id="myDiv" class="myDiv">
       <!--这个div只是用来形成小三角的-->
      <div id="innerDiv"><div>
      <p class="mP">我来了，你在哪？<p>
</div>

接下来，我们对它进行美化修饰，拿大背景开始

#myDiv{
width:200px;
height:40px;
background-color:blue;
border-radius:10px;
}

这时的效果是这样的：

然后我们进行加小三角的操作，这个地方是个挺关键的地方，就是对里面div的修饰

#innerDiv{
margin-left:-9px;
z-index:-1;
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-right:10px solid blue;
}

这样我们再来看下效果：

是不是样式就出现了呢，是的，基本样式已经出现了，但是还存在一点就是文字的位置是不是有些偏上了，这个修改应该不是问题了吧；

.mP{
padding:10px 0 0 10px;
color:#fff;
}

再来看下现在的效果

是不是好多了呢，有些困了，图做的有些仓促，有你认为还不够的地方，可以自己修改下，真的很不错。

实现的确实很简单，我们来简单总结一下：

1、圆角的应用，border-radius有了这个果然方便了很多

2、三角的应用，transparent这个也不错哦

3、z-index叠层和position：absolute的内层div定位

4、最后就是文字在div中的位置，padding的上右下左

好了，又到了该歇息的时刻喽，晚安