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

语法：

text-stroke:width color;

说明：

text-stroke是一个复合属性，它是由text-stroke-width和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;表示定义字体颜色为透明。镂空文字的效果很棒吧？在这本书中，我们在各个章节中会穿插各种特效的实现技巧，希望小伙伴们能够积累一下，这样可以为你的页面添色不少。