CSS3实现文字描边的2种方法(小结)

下面是详细讲解“CSS3实现文字描边的2种方法(小结)”的完整攻略。

概述

在 Web 开发中，我们常常需要对文字进行描边，这样可以增加文字的辨识度和美观度。本篇文章将简单介绍 CSS3 实现文字描边的 2 种方法。

方法一：text-shadow 属性

text-shadow 属性可以让文本产生阴影效果，通过设置多个阴影位置和颜色，可以实现文字描边的效果。

示例代码：

<p class="text-shadow-style">这是一段文字</p>

.text-shadow-style {
  font-size: 40px;
  color: #fff;
  text-shadow: 2px 2px #000,
               2px -2px #000,
               -2px 2px #000,
               -2px -2px #000;
}

在上面的示例代码中，设置了 4 个阴影，分别位于文字的左上、左下、右上、右下，颜色为黑色。通过设置多个阴影，并且对称布局，就可以实现文字描边的效果。

text-shadow 属性的一些常用值：

• text-shadow: [x-offset] [y-offset] [blur-radius] [color];

• x-offset：阴影的水平偏移量，数值可正可负。

• y-offset：阴影的垂直偏移量，数值可正可负。
• blur-radius：阴影的模糊半径，数值越大阴影越模糊。
• color：阴影的颜色。

方法二：-webkit-text-stroke 属性

-webkit-text-stroke 属性可以实现为文本描边，但只能在 WebKit 内核(Chrome, Safari)中使用。

示例代码：

<p class="webkit-text-stroke-style">这是一段文字</p>

.webkit-text-stroke-style {
  font-size: 40px;
  color: #fff;
  -webkit-text-stroke: 1px #000;
}

上面的代码中，将 -webkit-text-stroke 属性设置为 1px #000，表示文本描边为黑色，描边宽度为 1 像素。

-webkit-text-stroke 属性的一些常用值：

• -webkit-text-stroke-width：描边宽度。
• -webkit-text-stroke-color：描边颜色。

小结

以上就是 CSS3 实现文字描边的 2 种方法：text-shadow 属性和 -webkit-text-stroke 属性。其中，text-shadow 属性实现简单，但不能在 IE 浏览器中使用；-webkit-text-stroke 属性可以实现文本描边，但只能在 WebKit 内核浏览器中使用。

另外，如果需要同时兼容各个浏览器，可以选择使用第三方插件，如 zepto-text-shadow。