CSS3 词条目录
前端Wiki/词条/text-stroke 描边字

text-stroke 描边字

定义给文字加描边(轮廓)的属性,做出空心字、描边标题效果

标准属性是 text-stroke,但要生效必须写成 -webkit-text-stroke: 2px #f778ba(描边宽度 + 颜色)。它是「描边在字内」的画法:描边会占据文字内部空间,所以字会变细,常见做法是配合 color: transparent 做纯空心描边字。

海报风标题的经典配方:大字号 + -webkit-text-stroke 描边 + color: transparent,再叠一个 text-shadow 做位移投影。注意 Firefox 同样支持带 -webkit- 前缀的写法,通用性没问题。

HTML
<style>
  .hollow { color: transparent; -webkit-text-stroke: 2px #4a9eff; }
  .mixed { color: #f778ba; -webkit-text-stroke: 1px #fff; }
</style>
<h2 class="hollow">空心描边字</h2>
<h2 class="mixed">粉字白边</h2>
⚠ 常见误区
🔗 相关词条文字阴影 text-shadow线性渐变
← 返回来源章节实战翻转卡片