text-stroke,text-stroke-width,text-stroke-fill,css3文字描边,css3_CSS3教程,CSS3动画教程,HTML5教程,HTML5+教程,HTML5 PLUS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

        今天，我爱模板网的一个客户的一个网站需要用到一个特效：文字边框。本来可以做成图片，但是这个文字需要后台获取。方法有很多，比如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下测试)：

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>text-stroke css3文字描边</title> <style> html,body{font:bold 14px/1.5 georgia,simsun,sans-serif;text-align:center;} .stroke h1{margin:0;padding:10px 0 0;} .stroke p{ margin:50px auto 100px;font-size:100px; -webkit-text-stroke-width:2px; -webkit-text-stroke-color:#ff0; } .copyright,.info{font-style:italic;} </style> </head> <body> <body> <div class="stroke"> <h1>描边的文字：</h1> <p>我爱模板网<br>www.5imoban.net</p> </div> </body> </html>
提示：您可以先修改部分代码再运行

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

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

猜你喜欢