今天學(xué)到了一個(gè)新的CSS3屬性，更準(zhǔn)確的說是屬性值，那就是background-clip:text。利用此屬性值可以制作出很神奇的效果。可惜只有chrome支持，不過今天可以先來玩玩這個(gè)屬性?！ ∠葋斫榻B下background-clip吧，它的作用是對(duì)背景圖片進(jìn)行裁剪，取值有content-box|padding-box|border-box，即對(duì)哪一個(gè)盒子之外的背景進(jìn)行裁剪?？聪旅娴睦泳兔靼琢耍?div style="height:15px;">
美女
content-box
padding-box
border-box
以上三個(gè)取值很自然可以想到，但它還有另外一個(gè)取值有點(diǎn)讓人驚艷，那就是text，它可以把文本內(nèi)容之外的背景給裁剪掉。比如我們把上面的例子中寫上文字：
美女
content-box
padding-box
border-box
text
背景內(nèi)容只裁剪出了文字中的，是不是很神奇~不過這里需要和另外一個(gè)css3屬性配合使用，它就是-webkit-text-fill-color: transparent; 它是用來設(shè)置文字的填充色的，作用和指定color是一樣的，不過它有一個(gè)取值非常有用：transparent，可以把文字填充色設(shè)為透明，這樣的話就可以漏出后面背景的顏色了，也就是“文字鏤空”效果。
這樣一來，要實(shí)現(xiàn)一個(gè)漸變色文字就很容易了，我們只需要用css3的漸變?cè)O(shè)置背景色即可，讓后讓文字來把背景給鏤空顯示出來。非常簡單，這里有一個(gè)例子：
http://trentwalton.com/bgclip/這里我又想到了一個(gè)實(shí)際用途，那就是實(shí)現(xiàn)K歌的字幕效果，文字顏色隨進(jìn)度而變化，需要做到同一個(gè)字上面有不同的顏色，像下面這張圖：
以前我們要做這樣的效果，可能需要兩個(gè)元素來，重疊起來，不斷改變上面的元素的寬度來慢慢遮住下面，以此來模擬一種進(jìn)度效果，如下是用兩個(gè)元素實(shí)現(xiàn)的：
一盞離愁 孤單佇立在窗口一盞離愁 孤單佇立在窗口
這樣做有幾個(gè)缺陷：
1. 一段文字需要寫兩遍，用兩個(gè)元素
2. 用戶想要復(fù)制歌詞時(shí)，無法完全選中這一行的文字。（因?yàn)榇_實(shí)不是同一行）
既然我們可以用文字鏤空出背景色來了，要實(shí)現(xiàn)這個(gè)效果也就相當(dāng)容易了，只需一個(gè)div，css代碼如下：
@-webkit-keyframes loop{ 0%{background-position: -800px 0;} 100%{background-position: -0 0;}}.text2{ width: 800px; height: 78px; line-height: 78px; font-size: 40px; font-family: '微軟雅黑'; font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-color: red; background-image:url(bg.jpg); background-repeat:no-repeat; background-position: -800px 0; -webkit-animation:loop 10s linear infinite;}
看效果：
一盞離愁 孤單佇立在窗口
可以很好解決上面的兩個(gè)問題。當(dāng)然用css3的方式也有問題的，那就是我們喜聞樂見的，不！兼！容！所以這里也只能是玩一玩了，當(dāng)做一個(gè)思路。
