CSS3——文本延申扩展系列—text-shadow

text-shadow：

 4个值可填：x轴、y轴、blur模糊度(外阴影)、color颜色

然后我们再来做几个小demo，看看具体怎么应用

浮雕效果：

镂刻效果：

移入移出效果

 

        *{
            margin: 0;
            padding: 0；
        }
        :root{
            background: #000;
        }
        div{
            position: absolute;
            left: calc(50% - 350px);
            top: 100px;
            height: 100px;
             700px;
            font-size: 80px;
            color: #ddd;


            text-shadow:0px 0px 10px #f10,
                        0px 0px 20px #f20,
                        0px 0px 30px #f30;

            transition:all 2s;
        }
        div:hover{
            text-shadow:0px 0px 10px #ff0,
                        0px 0px 20px #ff1,
                        0px 0px 30px #ff2,
                        0px -5px 20px #ff1,
                        0px -20px 40px #ff3;
        }
        div::before{
            content: "科比 ";
            opacity: 0;
            text-shadow:0px 0px 10px #f0f,
                        0px 0px 20px #f1f,
                        0px 0px 30px #f2f,
                        0px -5px 20px #f1f,
                        0px -20px 40px #f2f;
            transition: all 2s;
        }

        div:hover::before{
            opacity: 1;
        }

-webkit-text-strike:  (只兼容谷歌内核)

字体描边效果

可填两个值：描边值、描边颜色