如何使用CSS实现text shadow仅显示外围轮廓（描边）的效果

可以实现，这是目前兼容性最好的纯CSS文字描边方案之一。

实现原理 #

将文字本身的颜色设置为透明，再叠加多个不同方向偏移的text-shadow，覆盖文字所有外围边缘，即可得到仅显示轮廓的效果。

代码示例 #

1px 细描边实现 #

.outline-text {
  color: transparent;
  font-size: 60px;
  font-weight: bold;
  text-shadow: 
    1px 1px 0 #000,
   -1px 1px 0 #000,
   -1px -1px 0 #000,
    1px -1px 0 #000;
}

2px 粗描边实现 #

描边越粗，需要叠加的阴影层数越多，避免边缘出现缺口：

.outline-text-2px {
  color: transparent;
  font-size: 60px;
  font-weight: bold;
  text-shadow: 
    0 2px 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    -2px 0 0 #000,
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 1px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    -2px 1px 0 #000,
    -2px -1px 0 #000,
    -1px -2px 0 #000,
    1px -2px 0 #000,
    2px -1px 0 #000;
}

方案优缺点 #

• 优点：兼容性极强，所有支持CSS3的主流浏览器都能正常渲染，不需要额外引入SVG、字体文件等资源
• 缺点：描边宽度超过3px之后，需要叠加的阴影层数会大幅上升，少量边缘位置可能出现轻微锯齿；对性能要求更高的场景可以搭配-webkit-text-stroke属性使用，不过该属性仅支持webkit内核浏览器，兼容性不如text-shadow方案。

效果示意：

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