讓CSS3給你的文字加上邊框寬度，並實現鏤空效果

此次，我主要向你們介紹一下CSS3下的-webkit-text-stroke屬性，並分享幾個用該屬性製做的鏤空文字效果。

 

一、-webkit-text-stroke屬性簡介

 

CSS邊框的一個不足就是隻有矩形的元素才能使用。-webkit-text-stroke能夠爲文字添加邊框。它不但能夠設置文字邊框的寬度，也能設置其顏色。並且，配合使用color: transparent屬性，你還能夠建立鏤空的字體。

 

二、一塊兒看幾個利用-webkit-text-stroke製做的文字特效

 

第一個CSS代碼以下：

 

1. h1.demo {
2.           text-transform: uppercase;
3.           font-size: 48px;
4.           margin: 0 0 30px 0; 
5.            
6.           -webkit-text-stroke: 1px black;
7.           color: white;
8.           text-shadow:
9.             3px 3px 0 #000,
10.              
11.             -1px -1px 0 #000,  
12.             1px -1px 0 #000,
13.             -1px 1px 0 #000,
14.             1px 1px 0 #000;
15. }

複製代碼

[backcolor=white !important]顯示效果：
<ignore_js_op> [backcolor=white !important]

第二個CSS代碼以下：

 

1. h2.demo {
2.           font-size: 48px;
3.           margin: 0 0 30px 0; 
4.            
5.           color: white;
6.           text-shadow:
7.             -3px -3px 0 #000,  
8.             1px -3px 0 #000,
9.             -3px 3px 0 #000,
10.             3px 3px 0 #000;
11. }

複製代碼

顯示效果：

<ignore_js_op> 

第三個CSS代碼以下，注意這個demo須要用基於webkit內核的chrome或者safari瀏覽器才能看，firefox上無效

 

1. h3.demo {
2.           font-size: 48px;
3.            
4.           -webkit-text-stroke: 2px red;
5.           -webkit-text-fill-color: white; 
6.           color: white;
7.            
8.           -webkit-animation: colorchange 1s infinite;
9.           -webkit-animation-direction: alternate;
10. }
11.          
12. @-webkit-keyframes colorchange {
13.             0% {
14.                 -webkit-text-stroke: 10px red;
15.                 letter-spacing: 0;
16.             }
17.             100% {
18.                 -webkit-text-stroke: 20px green;
19.                 letter-spacing: 18px;
20.             }
21. }

複製代碼

[backcolor=white !important][backcolor=white !important]

顯示效果：
<ignore_js_op> 

好了，以上就是-webkit-text-stroke的用法以及3個相關的在線例子，這個文字特效就介紹到這裏了，謝謝閱讀！

轉載請自覺註明原文：http://www.itivy.com/html5/archive/2012/1/11/css3-webkit-text-stroke-demo.html