如何使用CSS3如何实现文字带轮廓边框特效的方法

<style>
  .outlined-text {
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    display: inline-block;
  }
  .outlined-text::before,
  .outlined-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .outlined-text::before {
    color: #000;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
  }
  .outlined-text::after {
    color: #f00;
    text-shadow: -4px -4px 0 #ff0, 4px -4px 0 #ff0, -4px 4px 0 #ff0, 4px 4px 0 #ff0;
  }
</style>
<span class=\"outlined-text\" data-text=\"Outlined Text\">Outlined Text</span>