html空心字体颜色,用-webkit-text-stroke实现空心文字

-wekbit-text-stroke

-webkit-text-stroke是一个css属性，定义文字字符描边的宽度和颜色，它是-webkit-text-stroke-width和-webkit-text-stroke-color两个css样式的缩写。

我们先看一下使用-webkit-text-stroke实现的空心文字的效果：

代码如下：.tsk_cont{

margin:25px;

padding:25px;

box-sizing:border-box;

font-family:楷体;

border:1px solid #bababa;

background:#f1f1f1;

-webkit-text-stroke: 2px #C73A14;

font-size:48px;

color:transparent;

}

这里我们使用-webkit-text-stroke设置了文字的描边宽度2px，颜色是#C73A14。然后要实现空心文字的样式，我们要设置文字本身的填充颜色是transparent。

最重要的是，虽然-webkit-text-stroke是webkit内核浏览器的私有属性，但是FireFox也支持这个样式，手机端浏览器也支持这个样式，唯独IE浏览器不支持。所以这种空心文字的效果我们还是可以使用的。

兼容性上是除了IE浏览器都支持的，在移动端页面是可有用武之地，毕竟IE Mobile 在国内的用户量是属于极少量的，少到可以忽略不计。

最后说一下这个空心文字的-webkit-text-stroke有什么用途。它除了好玩之外，还可以在一些页面中用来作为凸显先的标题进行一些美观的设置。当然，你也可以给文字设置color，或者-wekbit-text-fill来设置文字的填充颜色，-webkit-text-fill的属性是一个染色值，是为了对应-webkit-text-stroke描边而生的一个样式，其效果跟color一样，都是设置文字的填充颜色。

带有填充效果的文字描边的效果可能如下: