js Clip的奇思妙想之文字拼接效果

　　那么有人就问了，什么CSS做的效果既奇妙又实用的呢？Clip，对，就是css里的clip属性，被多数人忽略的属性：

　　语法：

　　clip : auto | rect ( number number number number )

　　参数：

　　auto : 　对象无剪切

　　rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 。

　　需要注意的是

　　1.clip属性一定要和position:absolute配合使用。

　　2.裁切参考点始终是左上角，这点和margin,padding不同。

　　例：

　　<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>

　　我们可以使用clip实现各种元素的裁切和拼接。

　　经典的文字拼接实现，多彩文字效果：

　　

　　这个是竖着拼接，我们也可以横向拼接，多写一些的话可以实现渐变色，炫啊！