标准属性是 text-stroke,但要生效必须写成 -webkit-text-stroke: 2px #f778ba(描边宽度 + 颜色)。它是「描边在字内」的画法:描边会占据文字内部空间,所以字会变细,常见做法是配合 color: transparent 做纯空心描边字。
海报风标题的经典配方:大字号 + -webkit-text-stroke 描边 + color: transparent,再叠一个 text-shadow 做位移投影。注意 Firefox 同样支持带 -webkit- 前缀的写法,通用性没问题。
<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>