-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一样,都是设置文字的填充颜色。
带有填充效果的文字描边的效果可能如下: