CSS文字外描边

whuhewei2026-03-30 8:14

中心描边困境

CSS的 text-stroke 属性是中心描边，描边会同时向文字内外扩展，这会导致文字本身的视觉重量（字重）被侵蚀，同时描边比预期的细。通过伪元素绝对定位的方法，可以实现仅向外扩展的外描边效果，从而避免这个问题。

实现外描边

核心原理是创建两层文字：底层用于描边，顶层用于显示原始文字颜色，并通过绝对定位将它们重叠。需要注意的是底层伪元素的描边宽度要设置为期望描边宽度的两倍。

示例CSS：

css 复制代码

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.outline-text-center {
  font-size: 50px;
  font-weight: 900;
  color: pink;
  -webkit-text-stroke: 5px blue;
  text-stroke: 5px blue;
}

.outline-text-outer {
  position: relative;
  font-size: 50px;
  font-weight: 900;
  color: pink;
}

.outline-text-outer::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: calc(5px * 2) blue;
  text-stroke: calc(5px * 2) blue;
}

示例JS：

javascript 复制代码

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div class="outline-text-center">文字描边</div>
      <div class="outline-text-outer" data-content="文字描边">
        文字描边
      </div>
    </div>
  );
}

效果图：

第一行文字是原生的中心描边效果，第二行文字是使用伪元素的外描边效果。

实际项目开发中可以将fontStroke封装为mixin方便复用。