CSS文字加边框实现

在CSS中给文字加边框有多种方式，常见的有 border、text-stroke 和 text-shadow。

用 -webkit-text-stroke 给文字添加描边效果：

<p class="stroke-text">Hello World!</p>

<style>
stroke-text {
font-size: 80px;
color: white; /* 文字颜色 */
-webkit-text-stroke: 2px black; /* 描边宽度和颜色 */
}
</style>

使用 border 属性适用于给包含文字的元素整体加边框，而不是单独描绘文字轮廓。

text-border {
border: 2px solid red; /* 宽度、样式、颜色 */
padding: 10px; /* 内边距，避免文字贴边 */
display: inline-block; /* 保证边框紧贴文字 */
}

这种方式简单直观，但边框是矩形包裹，不会贴合字体形状。

使用 -webkit-text-stroke 描边可直接为文字路径添加描边，效果平滑。

stroke-text {
font-size: 60px;
color: white;
-webkit-text-stroke: 3px blue;
}

优点是描边自然，缺点是兼容性一般，需要 -webkit- 前缀。

使用 text-shadow 模拟描边通过多方向阴影叠加实现，兼容性好。

shadow-stroke {
font-size: 60px;
color: white;
text-shadow:
2px 0 black, -2px 0 black,
0 2px black, 0 -2px black,
2px 2px black, -2px -2px black,
2px -2px black, -2px 2px black;
}

适合需要兼容旧浏览器的场景，但大字号时可能出现锯齿。

如果需要精确贴合字体轮廓且不考虑旧浏览器，可用 -webkit-text-stroke。如果要兼容性好，可用 text-shadow。如果只是包裹文字区域，用 border 即可。