如何使用CSS text-stroke实现参考图所示的文字描边效果？

问题原因 #

• 当前代码将color设置为transparent，缺失了参考图中的白色文字填充效果，仅显示描边所以和预期不符
• webkit-text-stroke是居中描边属性，描边会占用文字本身的显示区域，无法实现完全在文字外围的描边效果

解决方案 #

修改h2的CSS样式即可，两种实现方案可选：

方案1：基础调整（实现简单） #

把文字填充色改为白色，适当调整描边宽度就能得到接近预期的效果：

h2 {
  color: #fff; /* 替换原来的transparent为白色填充 */
  font-size: 3em;
  margin: 0;
  font-family: "Baloo";
  -webkit-text-stroke: 2pt #608b31;
}

方案2：text-shadow实现外描边（兼容性更好、效果更贴合） #

不需要依赖webkit私有属性，通过多方向阴影叠加实现完全在文字外围的描边，效果更自然：

h2 {
  color: #fff;
  font-size: 3em;
  margin: 0;
  font-family: "Baloo";
  text-shadow: 
    2px 0 0 #608b31,
    -2px 0 0 #608b31,
    0 2px 0 #608b31,
    0 -2px 0 #608b31,
    1px 1px 0 #608b31,
    -1px -1px 0 #608b31,
    1px -1px 0 #608b31,
    -1px 1px 0 #608b31;
}

如果需要更粗的描边，把阴影的偏移数值对应调大即可。

内容的提问来源于stack exchange，提问作者TechDev