如何通过CSS设置文本双层外边框（内层白边外层黑边）

你可以通过以下两种常用方案实现内层白边+外层黑边的双层文字描边效果：

方案1：text-shadow 实现（代码最简，无需修改HTML） #

原生-webkit-text-stroke仅支持单层描边，我们可以用多层无偏移的text-shadow堆叠模拟外层黑色描边，代码如下：

body{
  background-color:yellow;
}
.demo{
  font-size: 100px;
  font-weight: 900;
  color: #000; /* 显式设置文字本身的颜色 */
  -webkit-text-stroke: 6px #fff; /* 内层白色描边 */
  /* 外层黑色描边，多层叠加消除边缘模糊感 */
  text-shadow: 
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000;
}

HTML代码无需修改，直接复用你原有代码即可。调整text-shadow中的数值即可修改外层黑边的粗细，叠加次数越多边缘越整齐。

方案2：伪元素实现（边缘完全锐利，无模糊） #

如果需要外层黑边完全清晰没有任何模糊，可以用伪元素复制文本放在底层实现，代码如下：

body{
  background-color:yellow;
}
.demo{
  position: relative;
  font-size: 100px;
  font-weight: 900;
  color: #000;
  -webkit-text-stroke: 6px #fff; /* 内层白色描边 */
}
.demo::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  /* 描边总宽度=内层白边宽度+外层黑边宽度，这里外层黑边设6px，总宽度就是12px */
  -webkit-text-stroke: 12px #000;
  color: transparent;
}

对应HTML需要新增data-text属性存储文本内容：

<p class="demo" data-text="9999">9999</p>

两种方案都兼容所有主流现代浏览器，可根据你的实际需求选择。

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