css 如何实现一个镂空字体呢?


摘要:
下文讲述使用css脚本实现一个“镂空字体”的方法分享,如下所示:

镂空字体:
一个字体的内容是透明,字体且使用边框绘制,我们将这种字体称之为“镂空字体”,
镂空字体的效果为:字体只存在边框,里面都是空心的。

如下所示:

实现思路:
     使用css属性 
    -webkit-text-stroke:1px #ff9c00;
    color:transparent;

注意事项:
    此属性在chrome浏览器中测试正常

例:
实现镂空字体—猫猫教程

 
<meta charset="UTF-8">

<style> 
div{
   font-size:100px; 
  -webkit-text-stroke:1px #ff9c00;
  color:transparent;
}
</style>
<div>
猫猫教程<br />
maomao365.com
</div>
css实现一个镂空字体的示例分享

css实现一个镂空字体的示例分享