js Clip的奇思妙想之文字拼接效果
更新時(shí)間：2008年11月02日 00:14:09 作者：
CSS的確是很強(qiáng)大，很奇妙。很多愛好者時(shí)常可以用CSS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說到底還只是一些不實(shí)用的東西。過濾之，過濾之……
那么有人就問了，什么CSS做的效果既奇妙又實(shí)用的呢？Clip，對(duì)，就是css里的clip屬性，被多數(shù)人忽略的屬性：
語法：
clip : auto | rect ( number number number number )
參數(shù)：
auto : 對(duì)象無剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切 。
需要注意的是
1.clip屬性一定要和position:absolute配合使用。
2.裁切參考點(diǎn)始終是左上角，這點(diǎn)和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我們可以使用clip實(shí)現(xiàn)各種元素的裁切和拼接。
經(jīng)典的文字拼接實(shí)現(xiàn)，多彩文字效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)是豎著拼接，我們也可以橫向拼接，多寫一些的話可以實(shí)現(xiàn)漸變色，炫?。?
語法：
clip : auto | rect ( number number number number )
參數(shù)：
auto : 對(duì)象無剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切 。
需要注意的是
1.clip屬性一定要和position:absolute配合使用。
2.裁切參考點(diǎn)始終是左上角，這點(diǎn)和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我們可以使用clip實(shí)現(xiàn)各種元素的裁切和拼接。
經(jīng)典的文字拼接實(shí)現(xiàn)，多彩文字效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)是豎著拼接，我們也可以橫向拼接，多寫一些的話可以實(shí)現(xiàn)漸變色，炫?。?
相關(guān)文章
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JavaScript中的偽數(shù)組用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
JS如何通過FileReader獲取.txt文件內(nèi)容
今天小編就為大家分享一篇JS如何通過FileReader獲取.txt文件內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12
JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)計(jì)算
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)的計(jì)算 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
利用了jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)互動(dòng)菜單
二級(jí)聯(lián)互動(dòng)菜單，利用了jquery的ajax實(shí)現(xiàn)，具體實(shí)現(xiàn)如下，喜歡的朋友可以參考下2013-12-12
popdiv...2006-07-07
JavaScript模運(yùn)算符理解及運(yùn)用實(shí)戰(zhàn)
這篇博客文章是為初級(jí)到中級(jí)JavaScript開發(fā)人員所寫,主要為大家介紹了JavaScript模運(yùn)算符理解及運(yùn)用實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-11-11
Event altKey,ctrlKey,shiftKey屬性解析
本篇文章主要是對(duì)Event altKey,ctrlKey,shiftKey屬性解析了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了JS使用post提交的兩種方式,實(shí)例分析了兩種JavaScript使用post提交的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
預(yù)防內(nèi)存泄漏2008-03-03