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

那么有人就问了，什么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不同。
例：

我们可以使用clip实现各种元素的裁切和拼接。
经典的文字拼接实现，多彩文字效果：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>clip澶</title>