text-stroke与文字外描边效果实例页面

展示

代码

• HTML：

  <span class="text-stroke-out" data-content="外描边">外描边</span>

• CSS：

  .text-stroke-out {
      font-size: 60px;
      -webkit-text-stroke: 4px deeppink;
      letter-spacing: 4px;
  }
  [data-content]::before {
      content: attr(data-content);
      position: absolute;
      -webkit-text-stroke: 0;
      color: deepskyblue;
  }