css 文字阴影

css 文字阴影

通过 textStyleObj 可以进行动态设置文字阴影文本，子元素动态数据是从父级获取

css 中的 skew 是倾斜角度

-webkit-mask-image 是文字的颜色过渡，类似于背景色，兼容性比较差，应该还有比较好的方式实现

<div class="text" :style="textStyleObj">{{ text }}</div>

text:"文字内容",
textStyleObj:{
       '--textContent':"'文字内容'"
   }

.text{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: white;
    font-weight: bolder;
    position: relative;
    z-index: 1;
    &::before{
        font-size: 50px;
        color: #111;
        font-weight: bolder;
        content: var(--textContent);
        position: absolute;
        transform: scaleY(0.7) skew(50deg) translate(-44px, 10px);
        z-index: -1;
        filter: blur(2px);
        -webkit-mask-image: linear-gradient(transparent , #111);
    }
}

效果