CSS stroke与全兼容的文字描边效果实例页面

展示

代码

• HTML：

  <svg>
      <text y="70%">感谢您购买<tspan>CSS新世界</tspan></text>
  </svg>

• CSS：

  svg {
      max-width: 100%;
      width: 500px; 
      height: 100px;
  }
  text {
      font-size: 50px;
      font-weight: bold;
      fill: white;
      stroke: deepskyblue;
  }
  tspan {
      stroke: deeppink;
      stroke-width: 2px;
  }