js Clip的奇思妙想之文字拼接效果
更新时间：2008年11月02日 00:14:09 作者：
CSS的确是很强大，很奇妙。很多爱好者时常可以用CSS做出一些让人意想不到的效果，比如用CSS做的灯笼、用CSS画的房子！然而这些东西酷归酷，说到底还只是一些不实用的东西。过滤之，过滤之……
那么有人就问了，什么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实现各种元素的裁切和拼接。
经典的文字拼接实现，多彩文字效果：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个是竖着拼接，我们也可以横向拼接，多写一些的话可以实现渐变色，炫啊！
语法：
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实现各种元素的裁切和拼接。
经典的文字拼接实现，多彩文字效果：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个是竖着拼接，我们也可以横向拼接，多写一些的话可以实现渐变色，炫啊！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现简单的select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了JavaScript中的伪数组用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
今天小编就为大家分享一篇JS如何通过FileReader获取.txt文件内容，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-12-12
这篇文章主要为大家详细介绍了JS实现购物车中商品总价的计算 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
二级联互动菜单，利用了jquery的ajax实现，具体实现如下，喜欢的朋友可以参考下2013-12-12
popdiv...2006-07-07
这篇博客文章是为初级到中级JavaScript开发人员所写,主要为大家介绍了JavaScript模运算符理解及运用实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步2023-11-11
Event altKey,ctrlKey,shiftKey属性解析
本篇文章主要是对Event altKey,ctrlKey,shiftKey属性解析了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JS使用post提交的两种方式,实例分析了两种JavaScript使用post提交的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
预防内存泄漏2008-03-03
最新评论