如何给文字添加“border”效果？

2025年12月16日 Tags: CSS

-webkit-text-stroke

使用该方式的缺点是描边区域会占据文字区域，因为描边的中心点是从文字边界开始的，往外扩展描边的一半宽度，往内扩展描边的一半宽度，往内自然就占据了文字本身。

解决方式是可以使用 paint-order ，这是一个新特性，兼容性不是很好。

先描边，再填充。同时将 -webkit-text-stroke 宽度设置为想要描边的两倍。

paint-order: stroke fill;

caniuse paint-order

MDN paint-order

使用 SVG 进行绘制 或者使用伪元素

这两种方案的整体思路都是：设置两个文本，一个主要设置描边，一个主要设置文字，然后将后一个文字叠加到前一个文字上。同样描边需要设置成想要描边的两倍。

示例代码：

<svg width="26" height="21" v-show="target1 > 0">
  <text x="2" y="16"
        fill="#FFFFFF"
        stroke="rgba(155, 130, 255, 1)"
        stroke-width="4"
        stroke-linejoin="round"
        stroke-linecap="round"
        font-size="18"
        font-family="Arial">
    
  </text>
  <text x="2" y="16"
        fill="#FFFFFF"
        font-size="18"
        font-family="Arial">
    
  </text>
</svg>

text-shadow 不太推荐，因为画出来的效果不太精确，字体本身的形状一般都不是特别规则。

推荐文章：

#the-webkit-text-stroke