text-shadow与3D立体投影和外描边效果实例页面

展示

代码

• HTML：

  <span class="text-shadow-3d">立体投影</span>
  
  <p class="text-stroke-out">外描边</p>

• CSS：

  .text-shadow-3d {
      font-size: 60px;
      color: deepskyblue;
      text-shadow: 1px 1px #005A79, 2px 2px #005A79, 3px 3px #005A79, 4px 4px #005A79, 5px 5px #005A79, 6px 6px #005A79, 7px 7px #005A79, 8px 8px #005A79;
      letter-spacing: 10px;
  }
  .text-stroke-out {
      font-size: 60px;
      color: #fff;
      text-shadow: 0 2px deeppink, 2px 0 deeppink, 0 -2px deeppink, -2px 0 deeppink, 2px 2px deeppink, -2px -2px deeppink, -2px 2px deeppink, 2px -2px deeppink;
      letter-spacing: 4px;
  }