如何仅使用单个标签通过CSS实现文字带边框的效果

你当前用到的-webkit-text-stroke属于居中描边，一半宽度会被文字填充色覆盖，所以才需要叠加两层标签实现纯外描边效果，以下两种单标签方案都可以满足需求：

方案1：text-shadow 实现（兼容性最优） #

通过多方向叠加text-shadow模拟外描边，无浏览器前缀要求，全主流平台兼容：

body {
  background: yellow;
  font-family: Microsoft JhengHei,'微軟正黑體';
}

h1 {
  font-size: 90px;
  color: white;
  /* 8个方向叠加阴影实现4px粗的平滑外描边 */
  text-shadow: 
    4px 0 0 #333,
    0 4px 0 #333,
    -4px 0 0 #333,
    0 -4px 0 #333,
    4px 4px 0 #333,
    4px -4px 0 #333,
    -4px 4px 0 #333,
    -4px -4px 0 #333;
}

对应的HTML仅需单个标签：

<h1>hello</h1>

如果需要更粗的描边，直接调整阴影偏移值即可，要更平滑的边缘可以再加1px偏移的过渡阴影层。

方案2：伪元素+text-stroke 实现（描边最平滑） #

用单个标签的内置伪元素替代第二层DOM节点，描边边缘比shadow方案更顺滑，适合大字号粗描边场景：

body {
  background: yellow;
  font-family: Microsoft JhengHei,'微軟正黑體';
}

h1 {
  font-size: 90px;
  color: white;
  position: relative;
}

h1::before {
  /* 直接读取标签自定义属性的内容，无需重复写文本 */
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: #333;
}

对应的HTML：

<h1 data-text="hello">hello</h1>

注意这里描边宽度要设为你需要的2倍，因为居中描边有一半会被上层的白色文字覆盖，最终露出的外侧描边就是4px。

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