一行CSS代码，竟然可以实现这么多文字效果

半夏

程序员

前言

之前学习过很多text-*属性，当时觉得text-shadow真就一个比较鸡肋的属性。但是今天在实现3D字体的时候，才发现text-shadow对于这种应用场景真的是好用的很。本文我就打算就text-shadow，实现几种CSS文字效果。

作为一个老淀粉了，EDG夺冠的热度，我是一定要凑的。本文就用EDG的log来做演示吧。

EDG! NB!

EDG LOGO

logo的样式是从外部有黑色的圆圈，再往里是白色的圈，中间的是黑的的圆。

如果只用一个div的话，我选择div+::after来实现.

首先是黑色的圆，

.edg-logo {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    background: #000;
}

再接下来就是黑色圈。

.edg-logo::after {
     content: "";
     width: 210px;
     height: 210px;
     border-radius: 50%;
     position: absolute;
     top: -15px;
     left: -15px;
     z-index: 1;
     border: 10px solid #000;
 }

立体字体

立体字体的思路主要是设置多个阴影，每个阴影在X和Y轴的偏移方向一直，并且偏移的值是逐渐增加的。zuiho

span {
        text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,