【example|用CSS写出来的马里奥？成功把box-shadow玩坏了~|example】_

按关键词阅读：

example|用CSS写出来的马里奥？成功把box-shadow玩坏了~

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

用 CSS 画个马里奥？box-shadow 的邪道用法~
如果要在网页上画一个像素风的小图标，你都有什么思路呢？用 Canvas 也好，单独制作 svg 也好，感觉办法有的是。那如果把方法限定在只能用 CSS 呢？可能你没想过，用 box-shadow 就能完成这个任务。
给不熟悉 CSS 的朋友介绍一下， box-shadow 的本职工作是给 DOM 加阴影效果，按照 MDN 的话说，就是：
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 —— MDN 文档
一般来说， box-shadow 负责的阴影是负责凸显前方的视图的小配角，这次我们要把它请到前面来做主角。这样的变身只需要 3 步：
把前面的 DOM 固定为正方形，这样每一块阴影也相应变成正方形（下图 example1）；
把阴影部分的偏移量设置为前景边长的整数倍，阴影部分就可以完整地显示了（下图 example2）；
按照需要在不同的偏移位置画上不同颜色的阴影，就可以像铺地砖一样设计出复杂的图形了（下图 example3）;

通过这种方法，我们就可以用 box-shadow 来绘制像素画了。
事实上， github 上很有名的 NES.css ，就是这么做的。下面就是 NES.css 中提供的一些像素图标：

为了看看 NES.css 是怎么用 box-shadow 来实现这些可爱的像素画的，我把相关的代码简化后抽离在了 zhuzilin/PIXEL.css 。因为这种邪道用法需要我们一个格子一个格子地去涂色（写 x、y 和颜色），对于上面这样的复杂图形，直接写 CSS 肯定又累人又容易出错，所以 NES.css 采用了 SASS 这个预处理器来引入变量、控制流、函数等功能。对于画一个马里奥来说：

给不熟悉 SASS 的朋友解释一下， @use 类似 javascript 中的 import ，用来引入在其他 .scss 文件中定义的变量呀，函数呀什么的。在具体使用的时候会用 @include 表明是在调用别处定义的函数。这段 SASS 代码中关键的地方就是这个函数调用：

在具体看这个函数是在做什么之前，先来看看它的参数以及其他的一些辅助性 CSS 是干什么用的。
画一个像素画需要 3 样东西：大小、图案和颜色。 $size、$mario 和 $mario-colors 就是对应的这三样的变量。这里有一个语法点，在 SASS 中，所有以 $ 开头的都是变量。 $size 表示每个格子有多大；$mario 是一个 2 维数组，用来表示马里奥的像素图的每个位置应该选用第几种颜色，其中 0 表示透明；$mario-color 则是指明 $mario 中的数字对应的什么颜色，例如 1 对应的是 #f81c2f 。
定义好这三样之后， NES.css 通过构造 ::before 上的 box-shadow 来绘制像素图案。伪元素的父 DOM 只需要设定好整体图案的整体大小就行，这里用了一些 SASS 内部的数组函数，意思上就是宽为 $mario 的行的长度乘格子变长，高为 $mario 的行数乘格子边长：
【example|用CSS写出来的马里奥？成功把box-shadow玩坏了~】
这里用到的函数我们会在后面再提到，这里就不赘述了。
伪元素里面，基本就是设定好一些定位信息，然后就是把伪元素的内容设置为空字符串，颜色为透明，从而保证彩色阴影前面没有遮挡。 & 也是 SASS 的语法，用于支持 CSS 的嵌套，所以 &::before 相当于 .pixel-mario::before 。分页标题#e#

完成这些准备后，我们就要把三个参数传给 pixelize 函数来构造 box-shadow 了。下面来看看 pixelize 里面做了什么：

@mixin 可以理解成 SASS 中的函数，不过不会返回参数，而是会直接根据输入生成内部的 CSS 了。对于不熟悉 SASS 的朋友来说，这个函数可能看着有些晕，其实这里面涉及的就是一些简单的控制流和数组操作，如果翻译成 javascript 的话大致是：

两段代码一对应，很容易看出 SASS 中的函数的意思，例如 nth(a k) 其实就是 a[k
。 pixelize 其实就是根据传入的图案数组和颜色，循环计算出每一块儿阴影对应的 CSS ，再拼接成最后的 box-shadow 属性。
有了这些 CSS 后，在网页中用这样的方式就可以加入图标了：

掌握了上面这种用法，我们还可以加上鼠标悬浮时的 CSS ，也就是在 hover 的时候用不同的像素画，甚至还能做出动画效果：

（如果对这个小动画感兴趣，可以看这里~）
到这里本文就结束了~ 如果觉得这个用法有趣的话，不妨点个赞哦~