text-shadow文本长阴影

<template>
    <div class="container">
       <h1>文本阴影</h1>
    </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
};
</script>
<style lang="scss">
// 阴影生成方法
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
    $gradient_steps: null;
    @for $i from 1 through $stepnum {
        $weight: ( ( $i - 1 ) / $stepnum ) * 100;
        $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
        $seperator: null;
        @if($i != $stepnum){ 
            $seperator: #{','}; 
        }
        $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
    }
    @return $gradient_steps;
}
$bg: #16a085;
body{
  background-color: $bg;
  font-family: 'Passion One', 'arial';
}
h1{
  text-align:center;
  font-size: 6rem;
  color: #fff;
  text-shadow:longshadow(darken($bg,30%),$bg,30, 0.5); // 穿入一个颜色a和一个颜色b,其中颜色a就是阴影开始的地方的颜色，颜色b就是背景的颜色，步长也就是类似你希望你的阴影有多长，最后一个就是透明度。然后就是计算了，我们没次都移动一个单位，然后颜色进行百分比的递减
}
</style>