让CSS3给你的文字加上边框宽度，并实现镂空效果

这次，我主要向大家介绍一下CSS3下的-webkit-text-stroke属性，并分享几个用该属性制作的镂空文字效果。

1、-webkit-text-stroke属性简介

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体。

2、一起看几个利用-webkit-text-stroke制作的文字特效

第一个CSS代码如下：

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

复制代码

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

第二个CSS代码如下：

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

复制代码

显示效果：

<ignore_js_op>

第三个CSS代码如下，注意这个demo需要用基于webkit内核的chrome或者safari浏览器才能看，firefox上无效

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

复制代码

[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