用 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 这个预处理器来引入变量、控制流、函数等功能。对于画一个马里奥来说：

@use 'pixelize.scss';

.pixel-mario {
  // 指定好马里奥需要的颜色有哪些
  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1530ad, #aeaeac, #fef102);
  // 马里奥的每个格子上需要哪个颜色
  $mario: (
    (0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0),
    (0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0),
    (0,0,0,0,2,2,2,3,3,4,3,0,0,0,0,0),
    (0,0,0,2,3,2,3,3,3,4,3,3,3,0,0,0),
    (0,0,0,2,3,2,2,3,3,3,4,3,3,3,0,0),
    (0,0,0,2,2,3,3,3,3,4,4,4,4,0,0,0),
    (0,0,0,0,0,3,3,3,3,3,3,3,0,0,0,0),
    (0,0,0,0,0,1,5,1,1,5,1,0,0,0,0,0),
    (0,0,0,1,1,1,5,1,1,5,1,1,1,0,0,0),
    (0,0,1,1,1,1,5,5,5,5,1,1,1,1,0,0),
    (0,0,3,3,1,5,7,5,5,7,5,1,3,3,0,0),
    (0,0,3,3,3,5,5,5,5,5,5,3,3,3,0,0),
    (0,0,3,3,5,5,5,5,5,5,5,5,3,3,0,0),
    (0,0,0,0,5,5,5,0,0,5,5,5,0,0,0,0),
    (0,0,0,2,2,2,0,0,0,0,2,2,2,0,0,0),
    (0,0,2,2,2,2,0,0,0,0,2,2,2,2,0,0)
  );
  // 单个格子的大小
  $size: 20px;

  position: relative;
  display: inline-block;
  // 整体的大小
  width: $size * length(nth($mario, 1));
  height: $size * length($mario);

  &::before {
    position: absolute;
    top: -$size;
    left: -$size;
    content: "";
    background: transparent;

    @include pixelize.pixelize($size, $mario, $mario-colors);
  }
}

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

@include pixelize.pixelize($size, $mario, $mario-colors);

在具体看这个函数是在做什么之前，先来看看它的参数以及其他的一些辅助性 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 的行数乘格子边长：

width: $size * length(nth($mario, 1));
height: $size * length($mario);

这里用到的函数我们会在后面再提到，这里就不赘述了。

伪元素里面，基本就是设定好一些定位信息，然后就是把伪元素的内容设置为空字符串，颜色为透明，从而保证彩色阴影前面没有遮挡。& 也是 SASS 的语法，用于支持 CSS 的嵌套，所以 &::before 相当于 .pixel-mario::before。

  &::before {
    position: absolute;
    top: -$size;
    left: -$size;
    content: "";
    background: transparent;

    @include pixelize.pixelize($size, $mario, $mario-colors);
  }

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

@mixin pixelize($size, $matrix, $colors, $default-color: null) {
  $ret: "";
  @if ($default-color == null) {
    // 把出现次数最多的颜色作为 default-color
    $matrix-colors: ();
    $counts: ();
    @each $row in $matrix {
      @each $item in $row {
        @if $item != 0 {
          $index: index($matrix-colors, $item);
          @if not $index {
            $matrix-colors: append($matrix-colors, $item);
            $counts: append($counts, 1);
          } @else {
            $count: nth($counts, $index) + 1;
            $counts: set-nth($counts, $index, $count);
          }
        }
      }
    }
    $default-color: nth($colors, nth($matrix-colors, index($counts, max($counts...))));
  }
  // 根据位置拼接 box-shadow 中的位移和颜色
  @for $i from 1 through length($matrix) {
    $row: nth($matrix, $i);

    @for $j from 1 through length($row) {
      $dot: nth($row, $j);
      @if $dot != 0 {
        @if $ret != "" {
          $ret: $ret + ",";
        }
        $color: nth($colors, $dot);
        @if $color == $default-color {
          $ret: $ret + ($j * $size) + " " + ($i * $size);
        } @else {
          $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
        }
      }
    }
  }

  width: $size;
  height: $size;
  color: $default-color;
  box-shadow: unquote($ret);
}

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

function pixelize(size, matrix, colors, default_color = null) {
  ret = "";
  if (default_color === null) {
    // 把出现次数最多的颜色作为 default_color
    matrix_colors = [];
    counts = [];
    for (row in $matrix) {
      for (item in row) {
        if item != 0 {
          index = matrix_colors.indexOf($item);
          if index == -1 {
            matrix_colors.push(item);
            counts.push(1)
          } else {
            count = counts[index] + 1;
            counts[index] = count;
          }
        }
      }
    }
    default_color = colors[matrix_colors[counts.indexOf(Math.max(...counts))]];
  }
  // 根据位置拼接 box-shadow 中的位移和颜色
  for (i = 1; i <= matrix.length; i++) {
    row = matrix[i];
    for (j = 1; j <= row.length; j++) {
      dot = row[j];
      if dot != 0 {
        if ret != "" {
          ret = ret + ",";
        }
        color = colors[dot];
        if color == default_color {
          ret = ret + (j * size) + " " + (i * size);
        } else {
          ret = ret + (j * $size) + " " + (i * size) + " " + color;
        }
      }
    }
  }
  
  return `width: ${size};
          height: ${size};
          color: ${default_color};
          box-shadow: ${ret};`
}

两段代码一对应，很容易看出 SASS 中的函数的意思，例如 nth(a, k) 其实就是 a[k]。pixelize 其实就是根据传入的图案数组和颜色，循环计算出每一块儿阴影对应的 CSS，再拼接成最后的 box-shadow 属性。

有了这些 CSS 后，在网页中用这样的方式就可以加入图标了：

<i class="pixel-mario"></i>

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

?

（如果对这个小动画感兴趣，可以看这里~）

到这里本文就结束了~ 如果觉得这个用法有趣的话，不妨点个赞哦~