一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
大家好，我是前端西瓜哥。
今天我像往常一样，打开 Stack Overflow 网站。
Stack Overflow 是一个程序员问答社区，程序员在开发过程中遇到问题时，就会上这个网站找答案，找到后将它们复制粘贴下来，以完成工作。
这次我打开一看，直接眼睛就瞎了。
这是什么抖音滤镜，酷炫界面前的我眼泪流下来（眼睛疼）。
然后我发现网页底部还提供了其他的风格主题，有 Facebook 风、终端风、Windows 3.1 风、顶级机密风、马里奥风等。各位读者可以自行去体验一番，挺有趣的。
不过我还是觉得抖音风格最酷炫，因为它属于那种真正风格化到极致的那种，怎么说，就是那种，对，那种清新脱俗的感觉。
你完全无法正常阅读内容也证明了这点。
说是抖音风格，其实是一种叫做 3D 眼镜 的特殊滤镜效果：将图形分别做不同方向的红色和青色的投影，产生类似看 3D 电影时的屏幕效果，需要戴上 3D 眼镜才能看到立体效果。
3D 眼镜滤镜的实现
我打开浏览器控制台，发现它对文字使用了下面的 CSS 样式。
body.theme-custom.theme-3d h1, body.theme-custom.theme-3d h2, body.theme-custom.theme-3d h3, body.theme-custom.theme-3d h4, body.theme-custom.theme-3d h5, body.theme-custom.theme-3d h6, body.theme-custom.theme-3d p, body.theme-custom.theme-3d a, body.theme-custom.theme-3d li, body.theme-custom.theme-3d span, body.theme-custom.theme-3d label, body.theme-custom.theme-3d button, body.theme-custom.theme-3d div, body.theme-custom.theme-3d input, body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea, body.theme-custom.theme-3d ::before, body.theme-custom.theme-3d ::after {
text-overflow: clip;
letter-spacing: 3px;
text-shadow: -3px 0 1px cyan, 3px 0 1px red;
}
其中最核心的样式是 text-shadow: -3px 0 1px cyan, 3px 0 1px red;。
-3px 0 1px cyan 在往左 3 px 的位置上，应用模糊半径为 3px 的青色阴影。3px 0 1px red 则是向右的红色，最终让文字产生一红一青两道阴影，妥妥的 3D 眼镜效果。
然后用 letter-spacing: 3px; 将原本值为 0 的字距调大一些，这是为了让投影不要重叠在一起，导致视觉效果过于混乱。
最后是 text-overflow: clip; ，在内容区域的极限处截断文本，这个感觉没啥用。
文字我们可以用 text-shadow，但它对图片没有效果。我们再去控制台瞧瞧 Stack Overflow 怎么处理图片的。
body.theme-custom.theme-3d img.s-avatar--image, body.theme-custom.theme-3d .gravatar-wrapper-24, body.theme-custom.theme-3d img {
filter: grayscale(80%) brightness(1.75) drop-shadow(4px 0 0 red) drop-shadow(-4px 0 0 cyan) !important;
opacity: .75;
}
这里用了 fiter 属性，依次应用的滤镜效果如下：
grayscale(80%)：灰色值设置为 80%，就是比较接近黑白的那灰色效果。brightness(1.75)：提高图片亮度。drop-shadow(4px 0 0 red)：对图片加上右侧的红色投影。这里只能对图片的边缘设置投影，所以图片最好是有边缘的 png 之类的图片。drop-shadow(-4px 0 0 cyan)：同上，这次是青色。
然后再使用 opacity: .75 降低图片透明度，使其更白一些，以便更好地和其他元素融为一体。
可以看到头像方方正正的 jpg，无法做到很好的红青阴影滤镜效果。
有边缘的 png，效果会更好一些。
一些 svg 和图片 icon，也和图片一样是使用类似的滤镜效果。
body.theme-custom.theme-3d svg, body.theme-custom.theme-3d .icon-bg, body.theme-custom.theme-3d .wmd-button, body.theme-custom.theme-3d input[type=radio], body.theme-custom.theme-3d input[type=checkbox] {
filter: grayscale(80%) saturate(.1) drop-shadow(-4px 0 0 cyan) drop-shadow(4px 0 0 red);
}
应用到自己的网站
我试着将这些样式应用到我个人博客网站，看看效果怎样。
好嘛，挺阴间的。算了算了。
最后
要实现简单的 3D 眼镜效果，其实没有想象的那么困难，只要使用 text-shadow、filter 给我们的元素加上红色和青色的投影就大差不差了。
为了写这篇文章，我眼都瞎了，给个点赞不过分吧。
本文首发于我的个人公众号：「前端西瓜哥」
