技巧-立体文字

给文字添加影子，让其看起来有立体的效果。首先啊，用 文字阴影 是做不出来的，可以把阴影当做一个元素，使用 伪元素 来做。

   <h1>COMFORTABLE</h1>

h1 {
    position: relative;
    font-size: 78px;
    color: #fff;
    &::before {
      content: "COMFORTABLE";
      position: absolute;
      color: #000; //阴影颜色
      transform: translate(-27px, 13px) scaleY(0.5) skew(45deg); //y方向缩短 倾斜45度
      z-index: -1;
      filter: blur(5px);//模糊
      -webkit-mask-image: linear-gradient(transparent, #000);//渐变
    }
  }

效果：