这是一个创建于 2229 天前的主题，其中的信息可能已经有所发展或是发生改变。
在家无聊，重新学习 css3，突然脑洞打开，用 css3 的 box-shadow 绘制图片。
原理介绍
box-shadow: 15px 10px 0px rgb(255,255,255); 15px 代表 x 轴值，10px 代表 Y 轴,0px 代表模糊值，最后一个是颜色。
图片是由一个个像素点组成，在 html5 中，将容器宽高固定，然后设置**border-radius:50%;**就可以将容器变成一个圆点，很多圆点就可以绘制成图形。
因此可以写一个脚本将图片的每一个像素点的颜色值读取，然后与 x，y 值拼接成 box-shadow 的属性。
效果预览：
** 浏览器计算需要时间，耐心等待即可 **
欢迎 v 友来开脑洞
20 条回复 2020-02-29 19:06:19 +08:00
 | 1 aiquit OP 一个 div+box-shadow 就可以绘制一张图片，脑洞大开 |
 | 2 wxsm 2020 年 2 月 28 日 感觉没什么技术含量。。而且卡的一批 |
 | 3 soulmt 2020 年 2 月 28 日 box-shadow 是渲染耗能最高的样式没有之一 |
 | 很有创意的想法，可惜不是第一个有这个想法的人。。。 the codepen spark 隔三差五就会出现一个 box-shadow 描点画的 project |
 | 8 purensong 2020 年 2 月 28 日 404 |
 | 9 buxudashi 2020 年 2 月 28 日 防爬虫用吧。 |
 | 12 yoyooyooo 2020 年 2 月 28 日 村通。。阴影画图片很占资源，适合玩玩，或者画像素不高的图标，还能配合过渡做些动画效果 |
 | 13 ITJoker 2020 年 2 月 28 日 firefox 打开很卡 死了一次 |
| 14 soulmt 2020 年 2 月 29 日 哈哈，脑洞还是很棒滴 |
| 19 buxudashi 2020 年 2 月 29 日 加入点随机点阵。 你弄成数字类的验证码好了。登录时输入验证码那种。这样防机器识别。 弄个 api 可以公开了。会有人用的。 |
Select Language