[分享]css3文字字体边框

CSS3带来了很多新的特性，其中之一就是文字字体边框。当我们需要为文字添加一定的突出效果时，可以通过字体边框来实现。下面我们先来看看CSS3中如何使用字体边框。fontsize: 24px; font...

CSS3带来了很多新的特性，其中之一就是文字字体边框。当我们需要为文字添加一定的突出效果时，可以通过字体边框来实现。下面我们先来看看CSS3中如何使用字体边框。

font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
text-shadow: 1px 1px 0px #999;
-webkit-text-stroke: 1px #444;
text-stroke: 1px #444; 

代码中，font-size、font-weight、color和text-align用于设置字体的大小、粗细、颜色和对齐方式，这些属性在CSS2中就已有。而新加入的text-shadow和text-stroke则分别用于为文字添加阴影和边框。

在上面的代码中，可以看到-webkit-text-stroke和text-stroke都设置了1px的边框宽度，并分别设置了#444的颜色。需要注意的是，-webkit-text-stroke是webkit浏览器私有的属性，而text-stroke是CSS3标准属性，用于非webkit浏览器，两者的作用是一样的。

除了边框的宽度和颜色，我们还可以通过text-stroke的另一个属性text-stroke-opacity来设置边框的透明度，值为0到1之间的小数。比如设置text-stroke-opacity: 0.5;则边框会有50%的透明度。

总之，使用CSS3的文字字体边框，可以为文字增加更多的特效，让页面更加生动、有趣。