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

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

之前学习过很多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,
          -3px -3px 0 #fff, -4px -4px 0 #fff,
          -5px -5px 5px rgb(0, 0, 0),
          -5px -5px 1px rgb(0, 0, 0);
      }

这样子看上去可能不是很立体，因为我设置的阴影比较少，当你设置的阴影越多，效果越明显。

镂空字体

镂空字体的实现思路，其实就是给文字四周都加上阴影，不过最好就是背景和文字颜色差不多，或者一致最好。

 text-shadow:  1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;

模糊字体

模糊字体应该是最简单的,text-shadow实现了提供了一个模糊值的选项。问了模糊效果最好，建议字体颜色透明。

color: transparent;
text-shadow:  0 0 10px #fff;

闪光字体

这个效果，其实跟上面的模糊效果，是亲兄弟。模糊字体主要是将字体颜色透明，或者比阴影颜色更淡。这个效果，不需要设置阴影颜色也可以实现。只要设置阴影模糊值。

text-shadow:  0 0 15px ;

当然提供颜色值的话，效果会更明显。

突出效果

镂空效果是在四周加上阴影，突出则是在一边加上相对的颜色阴影。或者是一边相近一边相反。

color: #ddd;
text-shadow:  1px 1px #000,-1px -1px rgb(219, 201, 201);