文字立体阴影

<h1 class="title">文字立体阴影</h1>

.title {

    font-size: 100px;

    color: #fff;

    position: relative;

}

.title::after {

    content: '文字立体阴影';

    position: absolute;

    top: 0;

    left: 0;

    color: black;

    /* 阴影效果，向右下角偏移60px,27px，倾斜50度 */

    transform: translate(-60px, 27px) scaleY(0.5) skew(50deg);

　/* 层级下调 */

    z-index: -1;

    /* 模糊效果，让阴影更柔和一点 */

    filter: blur(5px);

    /* 渐变阴影 */

    mask: linear-gradient(transparent, black);

}