在现代 Web 中，阴影已经成为主要设计要素之一，甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中，使用光和影子可以增加物理上的真实感，并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说，在 Web 中给 UI 添加阴影效果有多种不同的技术方案，但从实现阴影效果的 CSS 属性来说，常见的主要有 text-shadow（文本阴影）、box-shadow（盒子阴影）和 filter的drop-shadow()（不规则阴影）。今天，我们就一起来聊聊 CSS 这方面的特性。

最近看了一些设计相关的教程，看到几个有关于设计效果相关的专业术语，比如微软的 Fluent设计系统 中的亚克力效果（Acrylic Material），Mac OS的磨砂玻璃效果（Frosted Glass）。另外，记得去年 @Michal Malewicz的《Neumorphism in user interfaces》一文掀起了围绕“Neumorphism”设计风格的讨论，当时一度认为该设计风格将会是2020年的设计趋势，事实上去年并没有以这种设计风格为主流，而且很多人认为“Neumorphism”的UI风格是一种可怕的设计风格。不过，最近在Codepen上看到另一种设计风格，这种风格同样是@Michal Malewicz 提出来，并称之为“ 玻璃变形（Glassmorphism) ” 的UI风格，这种风格已在一些产品中出现，比如三星的一些广告和MKBHD的介绍视频。在设计圈很多设计师提出“玻璃变形（Glassmorphism）”设计风格运用得当，可以起到引人注目的效果。

在Web技巧的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值dark和light来进行切换，这是从最底层也是最原生的解决方案，除此之外还可以通过CSS的混合模式属性来模拟。当然，除了期刊中提到的技术方案之外，还有其他的一些解决方案。今天我们就来一起学习一下，如何实现黑暗模式和高亮模式之间的切换。

在iOS系统上常常能看到高斯模糊(Gaussian Blur)效果，而这种效果早期使用CSS来实现是较为痛苦的一件事情。其实，早上2011年，浏览器就开始对CSS filters规范有所支持。也就是说在2011年浏览器就可以实现Filters效果。但这种效果基本上都只运用在SVG上(只有SVG支持Filter效果)，而且只有Firefox浏览器支持，并且只能运用在HTML上。这也造就CSS要实现Filters效果是非常蛋疼的一件事情。

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家先来看个效果吧：