如何使用 CSS 的 text-stroke 属性实现文字描边效果？

推荐答案

使用 -webkit-text-stroke 属性可以实现文字描边效果。该属性需要指定描边的宽度和颜色。例如：

.stroked-text {
  -webkit-text-stroke: 2px red; /* 描边宽度 2px，颜色红色 */
}

本题详细解读

属性介绍

text-stroke (实际上是 -webkit-text-stroke) 是一个非标准的 CSS 属性，主要用于控制文本的描边效果。由于是 -webkit- 前缀，所以该属性主要在基于 WebKit 的浏览器（如 Chrome 和 Safari）中支持。虽然部分其他浏览器也可能支持，但兼容性不如 text-shadow 属性。

语法

-webkit-text-stroke: <width> <color>;

• <width>: 指定描边的宽度，可以使用任何 CSS 长度单位 (如 px, em, rem)。
• <color>: 指定描边的颜色，可以使用任何 CSS 颜色值 (如 red, rgb(255,0,0), #FF0000, hsl(0, 100%, 50%))。

注意事项

1. 兼容性问题: text-stroke 属性并非标准 CSS 属性， 使用时需要添加 -webkit- 前缀，以保证在 WebKit 浏览器中的兼容性。在其他浏览器中，可能需要使用 text-shadow 来模拟描边效果。
2. 描边与文字的叠加: 描边是在文字的边缘绘制的，会覆盖部分文字。描边的宽度设置过大时，可能导致文字模糊或难以辨认。
3. 不支持复杂描边: 该属性只支持单一颜色和宽度的描边，不支持渐变、多重描边等复杂效果。
4. 替代方案: 如果需要更高的兼容性或更复杂的描边效果， 可以使用 text-shadow 属性来实现类似效果，或者使用 SVG 文字来实现更精细的控制。
5. 性能考虑: 过多的描边效果可能会影响页面性能，特别是当应用于大量文本时。需要根据实际情况权衡使用。

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<style>
.stroked-text {
  font-size: 48px;
  font-weight: bold;
  color: white; /* 文字颜色 */
  -webkit-text-stroke: 2px red; /* 描边宽度 2px，颜色红色 */
}
.stroked-text-blue {
  font-size: 32px;
  font-weight: normal;
  color: black;
  -webkit-text-stroke: 1px blue;
}
</style>
</head>
<body>

<p class="stroked-text">文字描边示例</p>
<p class="stroked-text-blue">蓝色描边</p>

</body>
</html>

以上示例展示了如何使用 -webkit-text-stroke 属性为文本添加描边效果，分别使用了红色和蓝色。