用-webkit-text-stroke实现空心文字
2017-05-03 23:28

-wekbit-text-stroke

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

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

blob.png

代码如下:

.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浏览器不支持。所以这种空心文字的效果我们还是可以使用的。

blob.png

blob.png

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

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

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

blob.png


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3872)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1