[CSS]通过text-shadow实现炫酷文字立体特效

 我做pygame时，看了下官网，被它的字体特效深深地震撼了

https://www.pygame.org/newshttps://www.pygame.org/news

 OK，我们话不多说直接F12开检查，选中“NEWS”后一看CSS：

text-shadow: -1px -1px 0 #0D2,
     1px -1px 0 #000,
     -1px 1px 0 #000,
     1px 1px 0 #000;
/*最核心的代码*/

text-transform: uppercase;            /*使文字全部大写*/

font-family: 'Press Start 2P';        /*使用字体*/

font-size: 36px;        /*字体大小*/

搬到自己的css文件里，结果 Press Start 2P 字体不会引用

（难看死了,不上图）

经过伟大的百度Spider搜索后，。。还是直接上代码：

@font-face {
    font-family: "Press-Start-2P";
    src: url("./Press-Start-2P.ttf");
}

url( ) 的括号里填字体文件的地址

最后就与pygame官网的样子一样啦，又偷到了代码，哟西哟西

 

如果你想深入学习 CSS 的 text-shadow，去MDN吧

text-shadow - CSS：层叠样式表 | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow