2、css3 text-fill-color與text-stroke講解

標籤：介紹   作用   漸層   web   color   fill   顏色   支援   bsp   

最近看了一下css3，學習了一下新的屬性，這個兩個屬性比較讓我挺喜歡的，其中

text-fill-color:就是文字填充顏色而;

text-stroke:就是文字描邊,兩個屬性可以製作出各種炫酷的文字效果，不過IE系列都不支援，不過好在webkit都支援良好

注意：如果同時設定了text-fill-color和color那麼color不會起作用。

寫了兩個小案例：

<style>    h1{        -webkit-text-stroke:1px red;    }</style><h1>部落格園</h1>

text-stroke + text-fill-color製作文字鏤空效果

<style>body{background-color:#000;}h1{font-size:60px;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #fff;}</style><h1>部落格園</h1>

原來就是設定邊框為白色然後然文字顏色透明，背景顏色黑色，也就是黑白對比，自然文字就只能看見邊框了

background-clip:text結合text-fill-color製作文字漸層效果

h1{    font-size:60px;    background:linear-gradient(to bottom,#FCF,#000);    -webkit-background-clip:text;    -webkit-text-fill-color:transparent;}

注意:background-clip必須放在background後面不然不起作用，之所以要用background是因為text-fill-color不能使用linear所以只好藉助background了。

這個介紹的不錯：http://www.cnblogs.com/pssp/p/5908397.html

 

2、css3 text-fill-color與text-stroke講解