css text-fill-color與text-stroke講解

顧名思義「text-fill-color」就是文字填充顏色而「text-stroke」就是文字描邊。還別說，兩個屬性能夠製做出各類炫酷的文字效果，不過IE系列都不支持，不過好在webkit都支持良好。

text-fill-color:color;

<style>
    h1{
        -webkit-text-fill-color:red;
    }
</style>
<h1>博客園</h1>

話說倒有點像color了，這種狀況下卻是和color真的是同樣的。

得注意一下：若是同時設置了text-fill-color和color那麼color不會起做用。

h1{
    -webkit-text-fill-color:red;
    color:green;
}

text-stroke:width 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」那就更強大了。

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了。

background-clip:text會將背景做爲文字區域裁剪。

<style>
    h1{
        font-size:60px;
        background: url(bg.jpg) repeat;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
</style>
<h1>博客園</h1>

利用animation製做文字遮罩動畫效果

<style>
    h1{
        font-size:60px;
        background: url(bg.jpg) repeat;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        animation:fn 5s alternate infinite;
    }
    @keyframes fn{
            0%{
                background-position:0px 0px;
            }
            20%{
                background-position:30% 0px;
            }
            50%{
                background-position:50% 0px;
            }
            70%{
                background-position:70% 0px;
            }
            100%{
                background-position:100% 0px;
            }
    }
</style>
<h1>博客園</h1>

待續...