首页 > 建站教程 > CSS3+HTML5 >  text-stroke,text-stroke-width,text-stroke-fill,css3文字描边,css3正文

text-stroke,text-stroke-width,text-stroke-fill,css3文字描边,css3

        今天,我爱模板网的一个客户的一个网站需要用到一个特效:文字边框。本来可以做成图片,但是这个文字需要后台获取。方法有很多,比如php的图片功能,js,canvas,svg等等。但是我觉得麻烦。还不如用css3的text-stroke。

        css3的文字描边 text-stroke 有两部分组成:text-stroke-width 和 text-stroke-fill,即文字描边的粗细和颜色。目前只支持 Safari 和 Chrome,比较的可惜。

          用法:
text-stroke:1px red;
          或者:
text-stroke-width:1px;
text-stroke-fill:red;
        运行下面的代码,试试看(请在chrome或者Safari下测试):


提示:您可以先修改部分代码再运行