offset-x 和 offset-y 用于指定阴影偏移位置。以元素的左上角为原点，指定 XY 轴移动的位置。 color 字面意思，指定阴影颜色。 blur-radius 指定模糊效果的半径。跟 border-radius 差不多。 spread-raduis 模糊范围的扩大与缩小。 inset 关键字可以使阴影效果显示在元素内则。

<div class="container">
  <div class="box"></div>
</div>
<style>
  * {
    /* 为了方便看到元素而添加的边框（不加也行） */
    box-sizing: border-box;
  }
  .container {
    /* 长和宽包括 box-shadow */
    width: 200px;
    height: 200px;
  }
  .box {
    /* 元素属性 */
    width: 100px;
    height: 100px;
    border: 2px solid #777;
    /* 在元素右下角相同大小的方块 */
    box-shadow: 100px 100px rgba(7, 7, 7, 0.3);
  }
</style>
<div class="container">
  <div class="pixel one"></div>
</div>
<style>
  .container {
    /* 像素画的大小 */
    width: 100px;
    height: 100px;
  }
  .pixel {
    /* 使伪元素的位置可调整 */
    position: relative;
  }
  .pixel::before {
    content: "";
    /* 一个点的大小(例:20px x 20px) */
    width: 20px;
    height: 20px;
    /* box-shadow 着色，伪元素设为透明 */
    background-color: transparent;
    /* 调整伪元素位置，让左上角成为(0,0) */
    position: absolute;
    top: -20px;
    left: -20px;
  }
  .pixel.one::before {
    box-shadow:
     /* 列　行 色 */
     /* 第1列 */
      20px 20px #fb0600,
      20px 40px #fc322f,
      20px 60px #fc6663,
      20px 80px #fd9999,
      20px 100px #fecccb,
      /* 第2列 */ 40px 20px #60169f,
      40px 40px #7a23b0,
      40px 60px #964dc2,
      40px 80px #b681d9,
      40px 100px #d8beed,
      /* 第3列 */ 60px 20px #1388bc,
      60px 40px #269dc9,
      60px 60px #55b3d7,
      60px 80px #88cae2,
      60px 100px #bfe3ef,
      /* 第4列 */ 80px 20px #acd902,
      80px 40px #bde02d,
      80px 60px #cdea5e,
      80px 80px #dbef8e,
      80px 100px #f4fbc8,
      /* 第5列 */ 100px 20px #fb8f02,
      100px 40px #fda533,
      100px 60px #fdbb64,
      100px 80px #fed39a,
      100px 100px #fde8c9;
  }
</style>

首先，box-shadow 生产的影子大小不包括本体元素的大小，container 类的大小设为像素画完成后的大小就行。 接着，box-shadow 的影子大小由，pixel 类的大小决定，所以把 width 和 height设定为 20px。 实际的点是 before 伪元素绘制的，pixel 的 20px 正方形会在左上角留下空位，为此可以使用 position: absolute 调整。 最后使用 box-shadow 逐格绘制像素画。

.pixel.two::before {
  box-shadow:
    20px 20px #704b16,
    40px 20px #704b16,
    60px 20px #704b16,
    80px 20px #704b16,
    100px 20px #704b16,
    20px 40px #704b16,
    40px 40px #fdb778,
    60px 40px #fdb778,
    80px 40px #fdb778,
    100px 40px #704b16,
    20px 60px #fdb778,
    40px 60px #333333,
    60px 60px #fdb778,
    80px 60px #333333,
    100px 60px #fdb778,
    20px 80px #fdb778,
    40px 80px #fdb778,
    60px 80px #fdb778,
    80px 80px #fdb778,
    100px 80px #fdb778,
    20px 100px #fdb778,
    40px 100px #c70300,
    60px 100px #c70300,
    80px 100px #c70300,
    100px 100px #fdb778;
}
@mixin pixelize($matrix, $size, $colors) {
  $ret: "";
  @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);
        $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
      }
    }
  }
  box-shadow: unquote($ret + ";");
}
$heart-colors: (#333, #f11416, #831200);
$heart: (
  (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0),
  (0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0),
  (0, 1, 2, 2, 2, 1, 0, 0, 0, 1, 2, 2, 3, 1, 0, 0),
  (1, 2, 0, 0, 2, 2, 1, 0, 1, 2, 2, 2, 2, 3, 1, 0),
  (1, 2, 0, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 3, 1, 0),
  (1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 0),
  (1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 0),
  (1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 0),
  (0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 0, 0),
  (0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 0, 0, 0),
  (0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 3, 1, 0, 0, 0, 0),
  (0, 0, 0, 0, 1, 2, 2, 2, 2, 3, 1, 0, 0, 0, 0, 0),
  (0, 0, 0, 0, 0, 1, 2, 2, 3, 1, 0, 0, 0, 0, 0, 0),
  (0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0),
  (0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0),
  (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)
);
.icon {
  width: 20px;
  height: 20px;
  @include pixelize($heart, 20px, $heart-colors);
}

定义名为 pixelize 的 mixin，把像素画的矩阵（$heart）像素点的大小（20px）颜色列表（$hearts-colors）传入其中，即可生成 box-shadow 属性。 像素画的矩阵用数字 0 ～ N 表示，0 为透明，1 ～ n 为颜色列表对应颜色。

.mario {
  width: 8px;
  height: 8px;
  animation:
    jump 1s infinite,
    sprite 1s infinite;
}
/* 跳跃动作（上下移動） */
@keyframes jump {
  from,
  25%,
  75%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(8px * -8));
  }
}
/* 普通状态和跳跃状态的像素画 */
@keyframes sprite {
  /* 对比 animation-timing-function: steps(n)
   * 使用百分比可以更细致的调整动画时间
   */
  from,
  24%,
  76%,
  to {
    box-shadow:; /* 普通状态的像素画 */
  }
  25%,
  75% {
    box-shadow:; /* 跳跃状态的像素画 */
  }
}