纯css之line-height还挺神奇的。

小小的line-height能做啥呢。。还真别小看它

先上效果图(忽略图片中间的水印)：

个人觉得这个字挺好看的，适合做标题

直接上代码，代码少的我不想解释了:

  <div class="title">
    <div class="big-title" style="color: green;height: 30px;line-height: 57px;">Simple Demos</div>
    <div class="big-title" style="color: yellow;height: 60px;line-height: 0px;">Simple Demos<br></div>
  </div>

    body{
      background-color: #00CC99;
    }
    .title{
      position: absolute;
      top: 120px;
      left: 4em;
    }
    .title .big-title{
      font: 600 500% Verdana, Geneva, sans-serif;
      overflow: hidden;
    }

查看效果

对，大致思路就是通过修改两个div的line-height来实现两个div的拼接，使它们成为一行。。就形成上面的标题