使用 CSS box-shadow 绘制像素化图像
你知道可以用 CSS 画图吗box-shadow？我以前也不知道，直到我看到了 Jason Delia 画的超酷像素版 Ralph。看看那个Wreck a Ralph 的演示视频，还有我画的丑丑的千年隼。
我们开始吧！
首先，使用 . 创建一个块div。
阴影会跟随div元素的width样式。你可以用逗号分隔阴影的属性，为元素height应用多个阴影。box-shadowposition-x position-y blur-radius color
基本构建模块：
.block {
width: 10px;
height: 10px;
box-shadow: 0 0 0 black, 10px 0 0 black;
}
<div class="block"></div>
第二，使用坐标规划你的图像。
我耐心地画出了我完美心脏的坐标(x,y)，供您参考。不用谢。它div从左上角坐标为 的方框开始。每个方框的阴影都与(0,0)具有相同的高度(20px)和宽度。(20px)div
注意我添加了 `<div>`margin-bottom标签.heart-shadow。顾名思义，`<div>` 标签box-shadow是一种不会增加元素大小的阴影div。您可能需要设置 `<div>` 标签的 `<margin>` 标签，以防止其遮挡其他 DOM 元素。
HTML 和 CSS 代码片段：
.heart {
width: 20px;
height: 20px;
margin-bottom: 100px;
box-shadow: 20px 0 0 #60748c, 40px 0 0 #60748c, 60px 20px 0 #60748c,
80px 0 0 #60748c, 100px 0 0 #60748c, 120px 20px 0 #60748c,
0 20px 0 #60748c, 60px 20px 0 #60748c, 120px 20px 0 #60748c,
0 40px 0 #60748c, 120px 40px 0 #60748c, 20px 60px 0 #60748c,
100px 60px 0 #60748c, 40px 80px 0 #60748c, 80px 80px 0 #60748c,
60px 100px 0 #60748c;
}
<div class="heart"></div>
本教程中所有内容都使用硬编码，因为我比较懒。但在实际应用中，我们尽量避免硬编码。@vyvit建议使用 CSS 的 `var()` 函数。对于颜色代码等重复值，可以使用前缀将其赋值给一个 CSS 变量--，然后将其添加到:root元素中。现在，由于变量已在全局作用域中设置，因此可以在任何地方使用它。
使用 CSS var()：
:root {
--pink-color: #d87385;
}
.heart-shadow-with-color-variable {
width: 20px;
height: 20px;
margin-bottom: 100px;
box-shadow: 20px 0 0 var(--pink-color), 40px 0 0 var(--pink-color),
60px 20px 0 var(--pink-color), 80px 0 0 var(--pink-color),
100px 0 0 var(--pink-color), 120px 20px 0 var(--pink-color),
0 20px 0 var(--pink-color), 60px 20px 0 var(--pink-color),
120px 20px 0 var(--pink-color), 0 40px 0 var(--pink-color),
120px 40px 0 var(--pink-color), 20px 60px 0 var(--pink-color),
100px 60px 0 var(--pink-color), 40px 80px 0 var(--pink-color),
80px 80px 0 var(--pink-color), 60px 100px 0 var(--pink-color);
}
更详细的解释请点击此处：
网上有很多像素阴影生成器可以帮助你计算绘图的坐标。我用网上找到的最漂亮的生成器——Pixelator——画了这只离线恐龙。Pixelator如果能增加一些功能就更好了，比如可以查看之前的绘图记录（撤销、重做）以及拖拽和着色像素。我本来想给恐龙做动画，但我总是忘记坐标。我们拭目以待吧。
看看我的恐龙！我的恐龙还会眨眼呢。😂
（@vms20591希望你能看到这条消息，这是给你的！抱歉让你久等了。）
附言：总之，