IT兄弟連 HTML5教程 CSS3屬性特效 文字描邊

 

用CSS3實現的文字描邊效果，一個CSS3文字特效實例，字體能夠本身隨意改，字體顏色也能夠本身改。IE9如下瀏覽器無效果，因此提醒你們測試時候要使用Google Chrome。-webkit-text-stroke能夠爲文字添加邊框。它不但能夠設置文字邊框的寬度，也能設置其顏色。並且，配合使用color: transparent屬性，你還能夠建立鏤空的字體！

語法以下：

-webkit-text-stroke:寬度 顏色

接下來，爲讀者準備了一個實例，爲段落元素添加文字描邊。若瀏覽器不支持描邊則爲段落文字設置爲藍色，若支持則爲段落文字設置爲填充顏色爲藍色，描邊顏色爲黑色。代碼以下：

 

將這段代碼分別在Chrome、IE和FireFox瀏覽器中運行，咱們就能夠看到不一樣的文字效果，只有在Chrome瀏覽器中能夠看到文字描邊效果，如圖1所示。

圖1  文字描邊（Chrome瀏覽器）

 

咱們還能夠經過文字陰影text-shadow實現文字描邊效果，如下是對使用文字陰影實現描邊的幾條解釋：

（1）text-shadow:向文本設置陰影；

（2）text-shadow: h-shadow v-shadow blur color；

（3）h-shadow：指定陰影在水平方向上的延伸距離，能夠爲負值；

（4）v-shadow：指定陰影在垂直方向上的延伸距離，能夠爲負值；

圖1  未實現文字描邊（IE瀏覽器）    

 

圖1  未實現文字描邊（FireFox瀏覽器）

（5）blur：指定陰影模糊效果的做用距離；

（6）用逗號分隔的4個屬性值表明的方向順序爲右下左上；

（7）爲了兼容多瀏覽器而加上前綴-webkit-和-moz-。

如今想要使用text-shadow實現文字描邊效果如上例中的一樣設置文字顏色爲藍色描邊爲黑色，代碼以下：

將這段代碼寫在段落樣式表中後分別在Chrome、IE和FireFox瀏覽器中運行，咱們就能夠看到不一樣的文字效果，Chrome瀏覽器和FireFox中能夠看到文字描邊效果，如圖2所示：

圖2  利用text-shadow實現文字描邊效果（Chrome）

 

圖2  利用text-shadow實現文字描邊效果（IE）

 

圖2  利用text-shadow實現文字描邊效果（FireFox）

 

經過上述兩個例子對比，咱們能夠發現使用-webkit-text-stroke和text-shadow均可以實現文字描邊效果。可是text-stroke只支持webkit內核的瀏覽器，而text-shadow支持webkit和moz內核的瀏覽器。而text-stroke設置描邊會比較簡單。經過仔細地對比，咱們能夠發現二者實現描邊的效果有細微的差別，text-stroke例子中，咱們爲這個屬性的寬度設置爲2px，而text-shadow的延伸距離也設置爲2px。可是text-shadow設置的描邊明顯寬於text-stroke，緣由是text-shadow的描邊是往外延伸。text-stroke實現的效果更好，使用方法也更加方便，因此建議讀者對文字描邊使用-webkit-text-stroke。

-webkit-text-stroke配合使用color: transparent屬性，還能夠建立鏤空的字體，下面實現一個藍色的鏤空字體，代碼以下所示：

運行這段代碼在Chrome瀏覽器中運行中能夠看到文字鏤空效果，如圖3所示。

圖3 文字鏤空效果