在CSS3中,我们可以使用text-stroke属性为文本添加描边效果。所谓的“描边效果”,指的是给文字添加边框。

语法:

text-stroke:width color;

说明:

text-stroke是一个复合属性,它是由text-stroke-wdith和text-stroke-color两个子属性组成。

  • (1)text-stroke-width:定义边框的宽度。
  • (2)text-stroke-color:定义边框的颜色。

举例:text-stroke实现文本描边

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { font-size:30px; font-weight:bold; } #div2 { text-stroke:1px red; /*兼容Chrome浏览器*/ -webkit-text-stroke:1px red; } </style> </head> <body> <div id="div1">文本未被描边</div> <div id="div2">文本已被描边</div> </body> </html>

浏览器预览效果如下图所示。

分析:

Crhome和Firefox这两个浏览器都只能识别-webkit-前缀的text-stroke属性。你没看错,Firefox浏览器也是。这个text-stroke属性有点特殊。

文字描边效果在实际开发中并不常用,如果你有创意的话,可以结合其他技术来看看。例如,使用text-stroke配合color:transparent;,我们还可以实现镂空文字!请看下面例子。

举例:text-stroke实现镂空文字

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { font-family:Verdana; font-size:50px; font-weight:bold; color:transparent; /*设置文字颜色为透明*/ text-stroke:2px red; -webkit-text-stroke:2px red; } </style> </head> <body> <div>lvyestudy</div> </body> </html>

浏览器预览效果如下图所示。

分析:

color:transparent;表示定义字体颜色为透明。镂空文字的效果很棒吧?在这本书中,我们在各个章节中会穿插各种特效的实现技巧,希望小伙伴们能够积累一下,这样可以为你的页面添色不少。